Move focus to next control on key Enter
14,824
Solution 1
import { Directive, ElementRef, HostListener, Input } from'@angular/core';
@Directive({
selector: '[onReturn]'
})
export class OnReturnDirective {
private el: ElementRef;
@Input() onReturn: string;
constructor(private _el: ElementRef) {
this.el = this._el;
}
@HostListener('keydown', ['$event']) onKeyDown(e) {
if ((e.which == 13 || e.keyCode == 13)) {
e.preventDefault();
if (e.srcElement.nextElementSibling) {
e.srcElement.nextElementSibling.focus();
}
else{
console.log('close keyboard');
}
return;
}
}
}
Hope it will help you !
Solution 2
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
@Directive({
selector: '[onReturn]'
})
export class OnReturnDirective {
private el: ElementRef;
@Input() onReturn: string;
constructor(private _el: ElementRef,public renderer: Renderer) {
this.el = this._el;
}
@HostListener('keydown', ['$event']) onKeyDown(e:any) {
if ((e.which == 13 || e.keyCode == 13)) {
e.preventDefault();
let control:any;
control = e.srcElement.nextElementSibling;
while (true){
if (control) {
if ((!control.hidden) &&
(control.nodeName == 'INPUT' ||
control.nodeName == 'SELECT' ||
control.nodeName == 'BUTTON' ||
control.nodeName == 'TEXTAREA'))
{
control.focus();
return;
}else{
control = control.nextElementSibling;
}
}
else {
console.log('close keyboard');
return;
}
}
}
}
}
Related videos on Youtube
Author by
tdav
Updated on September 14, 2022Comments
-
tdav over 1 year
I have found some project on Angular 1.x where user can move focus to next control by pressing Enter key.
'use strict'; app.directive('setTabEnter', function () { var includeTags = ['INPUT', 'SELECT']; function link(scope, element, attrs) { element.on('keydown', function (e) { if (e.keyCode == 13 && includeTags.indexOf(e.target.tagName) != -1) { var focusable = element[0].querySelectorAll('input,select,button,textarea'); var currentIndex = Array.prototype.indexOf.call(focusable, e.target) var nextIndex = currentIndex == focusable.length - 1 ? 0 : currentIndex + 1; if (nextIndex >= 0 && nextIndex < focusable.length) focusable[nextIndex].focus(); return false; } }); } return { restrict: 'A', link: link }; });
But this does not work for Angular 2. How can I set focus on next control on Enter keypress in Angular 2?
-
sandip kakade about 7 yearsFor this you create separate Directive @tdav
-
sandip kakade about 7 years@AkshayKhale you can try this stackoverflow.com/questions/43445507/…
-
Ziggler over 6 yearsMy issue on page reload focus() is not working.. stackoverflow.com/questions/47949110/…
-
Ziggler over 6 yearsMy issue on page reload focus() is not working.. stackoverflow.com/questions/47949110/…
-
Hiep Tran about 6 yearsit work perfectly, exactly what i need, thank you so much
-
mrapi almost 6 yearsif on a form inputs are wrap inside individual bootstrap 'form-row' or 'col-..' divs code above not working since using .nextElementSibling.any fix?
-
Asim Sajjad about 5 yearswill this be worked inside IOS app (e.srcElement.nextElementSibling.focus()) , I have used it but it didn't worked inside IOS app, it worked in all the browser but not inside IOS app.