HTML5 event handling(onfocus and onfocusout) using angular 2

Question

I have a date field and I want to remove the place holder by default.

I am using javascript onfocus and onfocusout events for removing placeholder.

Can anyone help with using angular2 directive?

<input name="date" type="text" onfocus="(this.type='date')" onfocusout="(this.type='text')" class="dateinput">

I try to solving in this way, but i am getting problem with resetting the input field type.

import { Directive, ElementRef, Input } from 'angular2/core';
@Directive({
    selector: '.dateinput', 
    host: {
    '(focus)': 'setInputFocus()',
    '(focusout)': 'setInputFocusOut()',
  }})

  export class MyDirective {
      constructor(el: ElementRef) { this.el = el.nativeElement; console.log(this.el);}

      setInputFocus(): void {
        //console.log(this.elementRef.nativeElement.value);
      }
  }

Pardeep Jain · Accepted Answer · 2020-08-21T05:15:24.140

318

Try to use (focus) and (focusout) instead of onfocus and onfocusout

like this : -

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

also you can use like this :-

some people prefer the on- prefix alternative, known as the canonical form:

<input name="date" type="text" on-focus="focusFunction()" on-focusout="focusOutFunction()">

Know more about event binding see here.

you have to use HostListner for your use case

Angular will invoke the decorated method when the host element emits the specified event.@HostListener is a decorator for the callback/event handler method

See my Update working Plunker.

Working Example Working Stackblitz

Update

Some other events can be used in angular -

(focus)="myMethod()"
(blur)="myMethod()" 
(submit)="myMethod()"  
(scroll)="myMethod()"

edited Aug 21 '20 at 05:15

answered May 16 '16 at 05:53

Pardeep Jain

84,110
37
165
215

where you have used your directive named as `dateinput` ? – Pardeep Jain May 16 '16 at 06:04
@vishnu see my Updated plnuker – Pardeep Jain May 16 '16 at 06:23
2

Something to note, if you use the default HTML implementation, it may use the global scope when calling the designated function. For example: `onfocusout="someMethod()"` `someMethod()`, in this case, will be called in the global scope. That's another reason why using Angular in this case is valuable. – kbpontius Jun 12 '17 at 19:19
1

@user5365075 I didn't see any such update, see here ng6 demo using `focus` https://stackblitz.com/edit/angular-tmphvq?file=src%2Fapp%2Fapp.component.html – Pardeep Jain Oct 10 '18 at 12:33
2

My mistake, `focus` will work on supported inputs and textareas, but if you have custom components that don't support it, you can use `focusin` instead :) – user5365075 Oct 10 '18 at 12:55
`onfocusout="myFuntion()"` does not work in angular 9 , `(focusout)="myFunction()" ` Thanks @PardeepJain – Saad Abbasi Aug 21 '20 at 03:54
@SaadAbbasi `onfocusout` should be working like `on-focusout`, for more reference please refer to a working example. – Pardeep Jain Aug 21 '20 at 05:15

abahet · Answer 2 · 2018-06-18T12:34:42.637

If you want to catch the focus event dynamiclly on every input on your component :

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {

  constructor(private el: ElementRef) {
  }

  ngAfterViewInit() {
       // document.getElementsByTagName('input') : to gell all Docuement imputs
       const inputList = [].slice.call((<HTMLElement>this.el.nativeElement).getElementsByTagName('input'));
        inputList.forEach((input: HTMLElement) => {
            input.addEventListener('focus', () => {
                input.setAttribute('placeholder', 'focused');
            });
            input.addEventListener('blur', () => {
                input.removeAttribute('placeholder');
            });
        });
    }
}

Checkout the full code here : https://stackblitz.com/edit/angular-93jdir

score 4 · Answer 3 · answered Apr 02 '19 at 16:04

I've created a little directive that bind with the tabindex attribute. It adds/removes the has-focus class dynamically.

@Directive({
    selector: "[tabindex]"
})
export class TabindexDirective {
    constructor(private elementHost: ElementRef) {}

    @HostListener("focus")
    setInputFocus(): void {
        this.elementHost.nativeElement.classList.add("has-focus");
    }

    @HostListener("blur")
    setInputFocusOut(): void {
        this.elementHost.nativeElement.classList.remove("has-focus");
    }
}

score 2 · Answer 4 · answered Oct 14 '19 at 07:59

2

<input name="date" type="text" (focus)="focusFunction()" (focusout)="focusOutFunction()">

works for me from Pardeep Jain

answered Oct 14 '19 at 07:59

Hoàng Huỳnh Nhật

146
1
4

score 0 · Answer 5 · answered Feb 26 '19 at 18:16

The solution is this:

  <input (click)="focusOut()" type="text" matInput [formControl]="inputControl"
  [matAutocomplete]="auto">
   <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" >
     <mat-option (onSelectionChange)="submitValue($event)" *ngFor="let option of 
      options | async" [value]="option">
      {{option.name | translate}}
     </mat-option>
  </mat-autocomplete>

TS
focusOut() {
this.inputControl.disable();
this.inputControl.enable();
}

HTML5 event handling(onfocus and onfocusout) using angular 2

5 Answers5

Update

Linked