I would like to set the focus on an input at the initialization.
I have followed this great article : mhartington.io/post/setting-input-focus/ (which work great), but i want to do something slightly different by focusing at the initialization :
Hey!
Do you know how can i use your solution for dynamic generated inputs (with *ngFor) ?
i dont know how to set “#input” dynamically (so each one gets unique reference)
This doesn’t seem to be working for me. The focus sets correctly, and I have this line in my config.xml but it doesnt open keyboard. Could this be due to plugin ‘ionic-plugin-keyboard’?
On second look, it does work, but not on the first time focusing. I.e. after the first time the focus is set to the input
I had this problem also. Not solved with this 4 steps.
The cursors is one moment on the inputfield, the keyboard raises and go back immediately, the cursors disappears also after that…
Small addition to this: If you want to focus a field in a modal / alert or anything that requires a transition:
You have to set the setTimeout delay long enough for the transition to end! or else it will not focus.
Hello everyone!
I don’t know if any of you had this issue but after updating my project to Ionic 3.5.0 it seems like the focus and blur events are deprecated in ion-input.
these are the messages logged: “(focus) is deprecated in ion-input, use (ionFocus) instead” the same for blur.
I have a directive that makes use of the blur event so I can format the input values before send them to the server. I wouldn’t want to go input by input setting the ionBlur handler (my app is full of forms).
Does any of you would know how i could implement the ionBlur in my directive?
import { Directive, HostListener, ElementRef, Attribute} from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector:'[inputFormat]'
})
export class InputFormat{
elem:HTMLInputElement;
constructor(
public elRef:ElementRef,
public control:NgControl,
@Attribute('inputFormat') public inputFormat:string){
this.elem = elRef.nativeElement;
}
capitalize(input:String){
let preps = ['de', 'di', 'do', 'da', 'dos', 'das', 'dello', 'della', 'dalla', 'dal', 'del', 'e', 'em', 'na', 'no', 'nas', 'nos', 'van', 'von', 'y'];
let str = input.replace(/(^|\s)([a-z])/g, function(m, p1, p2) {
return p1 + p2.toUpperCase();
});
//console.log(str);
let arr = str.split(" ");
//console.log(arr);
for(let i = 0; i<arr.length; i++){
let istr = arr[i];
for(let j in preps){
if(istr.toLowerCase() == preps[j]){
arr[i] = preps[j];
}
}
}
str = arr.join(' ');
return str;
}
@HostListener('focus', ['$event.target.value'])
onFocus(value){}
@HostListener('blur', ['$event.target.value'])
onBlur(value){
if(value != undefined && value != ''){
if(this.inputFormat == 'lowercase'){
this.control.control.setValue(value.toLowerCase());
}
else if(this.inputFormat == 'uppercase'){
this.control.control.setValue(value.toUpperCase());
}
else if(this.inputFormat == 'capitalize'){
let val = this.capitalize(value.toLowerCase());
this.control.control.setValue(val);
}
}
}
}
My system infos:
global packages:
@ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
@ionic/app-scripts : 1.3.12
@ionic/cli-plugin-cordova : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : ios 4.3.1
Ionic Framework : ionic-angular 3.5.0
System:
Node : v6.5.0
OS : OS X El Capitan
Xcode : Xcode 8.1 Build version 8B62
ios-deploy : 1.9.1
ios-sim : 5.0.13
npm : 3.10.3
Btw, waiting for transitions to end by setting a delay long enough is kinda crappy. Does anyone know if theres any hooks, callbacks or observables for transitions?
they have, but sometimes the usecase is more compicated than that.
For instance: I have a button, which requires a user to be logged in, but he can click it always.
If not loggedIn a modal with the loginpage opens.
Logging in will lead to the removal of the modal (from within the modal)
Now on the underlying page stuff has changes, and the ion-content needs to resize. To properly do this i need to wait unit the transition is over.
I will check if there is an observable for the open - close events, but I doubt whether they take the transition time into account.