1

I am using an input field with placeholder in my angular2 app. 

<input #searchEl type="search" placeholder="some text" autofocus>

The requirement is to keep focus in on the input field by default. However on IE, it looks like the placeholder text is not displayed when we focus in (not the case with chrome and firefox).

Is there any solution or workaround to this issue? Is there a way to still display placeholder text when we focus in the input field on IE? I am using IE 11

user1892775
  • 2,001
  • 6
  • 37
  • 58
  • which version of IE and can you also put your code where you handle the focus. – Sahin Erbay Feb 28 '18 at 19:02
  • Please see my updated question. I am using IE11 and Its same issue if I use autofocus (causing focus in in the input element by placing the cursor inside the box) – user1892775 Feb 28 '18 at 19:51
  • possible duplicate of [this](https://stackoverflow.com/questions/40118053/placeholder-not-working-with-internet-explorer) – Farhan Haque Feb 28 '18 at 20:43
  • Possible duplicate of [Placeholder not working with internet explorer](https://stackoverflow.com/questions/40118053/placeholder-not-working-with-internet-explorer) – Farhan Haque Feb 28 '18 at 21:02
  • Farhan, It is not a duplicate of the issue you mentioned. My issue is that placeholder text is not displayed only when you focus in the input box. The issue you pointed relates to placeholder not displayed at all – user1892775 Feb 28 '18 at 22:44

1 Answers1

0

You should use renderer2 library in order to manipulate DOM for best practices. If focus doesn't work try also click 

`import { Component, ElementRef, ViewChild, AfterViewInit, Renderer2 } from '@angular/core';

@Component({
    selector: 'app-child',
    template: `
        <input #searchEl (focus)="keepPh()" type="search" placeholder="some text">
        <div> Some other content </div>
    `
})
export class ChildComponent implements AfterViewInit {

    @ViewChild('searchEl') input: ElementRef;

    constructor(private renderer: Renderer2) { }

    //Sets autofocus true when component's views are initialized
    ngAfterViewInit() {
        this.renderer.setProperty(this.input.nativeElement, 'autofocus', true);
    }

    //Keeps place holder visible on input focus
    keepPh() {
        this.renderer.setAttribute(this.input.nativeElement, 'placeholder', 'some text');
    }
}`

You can also do this via directives

`import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
    selector: '[appFocus]'
})
export class FocusDirective {

    constructor(private renderer: Renderer2, private el: ElementRef) { }

    toggleFlag: Boolean = false;

    ngOnInit() {
        this.renderer.listen(this.el.nativeElement, 'focus', () => {

            this.toggleFlag = (this.toggleFlag === true) ? false : true;

            if (this.toggleFlag) {
                this.renderer.setAttribute(this.el.nativeElement, 'placeholder', 'some text');
            } else {
                this.renderer.removeAttribute(this.el.nativeElement, 'placeholder', 'some text');
            }

        })
    }
}

//Use it like so:
<input type="search" placeholder="some text" appFocus>`
Sahin Erbay
  • 994
  • 2
  • 12
  • 24
  • This didn't solve the issue on IE. Have you tested on IE 11? On focus in, the placeholder is still not visible on IE – user1892775 Feb 28 '18 at 21:56
  • Have you tried both of them? After a bit searching, it seems like a bug. See it here: https://stackoverflow.com/questions/14445891/keep-placeholder-on-focus-in-ie10 – Sahin Erbay Feb 28 '18 at 22:01
  • Based on what I had read, it seems like IE behavior but I was hoping to find a simple workaround for this – user1892775 Mar 01 '18 at 01:17