How to force Blur on ion-input

[nikoasumi]

Hi all,
Been scratching my head for awhile now.
Is there anyway to force blur (unfocus) on an ion-input?
I only able to find the blur event, but I could not find a .blur() function.

Any way to unfocus an input manually?

Much thanks in advance!

[rdlabo]

You can use blur event like this.

<ion-input (blur)="blurEvent($event);"></ion-input>

You may read source code in “node_module/ionic-angular/components/input”.
Roughly, I read here.

    core_1.Component({
        selector: 'ion-input',
        template: "\n    <input [type]=\"type\" [(ngModel)]=\"_value\" (blur)=\"inputBlurred($event)\" (focus)=\"inputFocused($event)\" [placeholder]=\"placeholder\" class=\"text-input\">\n    <input [type]=\"type\" aria-hidden=\"true\" next-input *ngIf=\"_useAssist\">\n    <button clear [hidden]=\"!clearInput\" type=\"button\" class=\"text-input-clear-icon\" (click)=\"clearTextInput()\" (mousedown)=\"clearTextInput()\"></button>\n    <div (touchstart)=\"pointerStart($event)\" (touchend)=\"pointerEnd($event)\" (mousedown)=\"pointerStart($event)\" (mouseup)=\"pointerEnd($event)\" class=\"input-cover\" tappable *ngIf=\"_useAssist\"></div>\n  ",
        directives: [native_input_1.NativeInput, native_input_1.NextInput, common_1.NgIf, forms_1.NgModel],
        encapsulation: core_1.ViewEncapsulation.None,
    }),

regards.

[nikoasumi]

Thanks for the response.
But I am more referring to the actual blur action, and not the blur event.

I currently have an ion input set to focus using the setFocus(). I wish to unfocus it when I pause the app.
In ionic 1, I remeber there is a .blur() function that can unfocus an input.

[davor]

I was wondering also about this. Found one tutorial how to “focus” input, maybe it can be “reversed” and use “blur” in place of focus, but didn’t tried.

Ionic 2 set Focus of Input Element - theCodeCampus

[nikoasumi]

oh great thanks! I will take a look and see if it works. Much appreciated

Though I wonder if it is a “good practice” from ionic standpoint to go thru angular2 internal methods vs using ionic expose methods.
ie. this.renderer.invokeElementMethod(element, ‘focus’, [])
vs something like this.input.blur()

I am just curious as to why there is a setFocus function, but not a blur function.

[nikoasumi]

I think I finally figured it out. Although perhaps someone from ionic should see if this is a hack or not. lol

Grab the ion-input using
@ViewChild(‘myinput’) myinput: ElementRef;

then call the following:
this.myinput[’_native’][’_elementRef’][‘nativeElement’]‘blur’;

it seems to work for me for now. Hope this helps someone.

Cheers!

[rhanesoghlyan]

ion-input has a .setBlur() method. You can get element with help @ViewChild()

[tavo]

Saludos nikoasumi, desde COLOMBIA. a mi me funcionó con “(ionBlur)” asi:

<ion-input type=“number” [(ngModel)]=“oClient.id” (ionBlur)=“consultar();”>

[santanajensy]

@tavo

ionBlur

muchas gracias me salvaste…

[Ballance258]

A Question came up in the Ionic Worldwide Slack today about how to set focus to an input. N

[Ballance258]

A Question came up in the Ionic Worldwide Slack today about how to set focus to an input!

[sonicwong]

do u know how can I do this in ionic v4?

[Sebiworld]

The setBlur() function seems to be removed from IonInput, but you can do it via its Input-Element.

In your view:

<ion-input type=“number” #myNumberInput>

In your component.ts you get the element as a view-child:

@ViewChild('myNumberInput', { static: false }) myNumberInput: IonInput;

And then you can blur the element from anywhere in your code by bluring the inner input-element:

this.myNumberInput.getInputElement().then(
    inputElement => inputElement.blur()
);

For the sake of completeness, this is how you focus it:

this.myNumberInput.setFocus();