Angular2 keyup event update ngModel cursor position jumps to end
Solution 1
You need to wrap following lines in setTimeout() call. The reason is that you need to give browser time to render new value and only then change cursor position which gets reset after new value rendering. Unfortunately, this will cause a little flickering, but I wasn't able to find any other way to make it work.
setTimeout(() => {
this.el.nativeElement.selectionStart = pos;
this.el.nativeElement.selectionEnd = pos;
});
Solution 2
You can change position of a cursor without setTimout() and flickering as suggested in accepted answer with setSelectionRange() like this:
this.el.nativeElement.setSelectionRange(position, position, 'none');
Example: stackblitz
Solution 3
For my case, an acceptable solution without using setTimeout was to:
- Not update the model on keyup
-
Update the model instead on focusout
@HostListener('focusout') focusOut() { this.ngModelChange.emit(this.el.nativeElement.value); }
conor
Updated on June 14, 2022Comments
-
conor almost 2 years
I am having an issue with an Angular2 directive that should do the following:
- Detect if the user enters '.' character.
- If the next char is also '.', remove the duplicate '.' and move the cursor position to after the '.' char
I have the above working, however, when using this in combination with ngModel, the cursor position jumps to the end every time the model is updated.
The input:
<input type="text" name="test" [(ngModel)]="testInput" testDirective/>
The directive:
import {Directive, ElementRef, Renderer, HostListener, Output, EventEmitter} from '@angular/core'; @Directive({ selector: '[testDirective][ngModel]' }) export class TestDirective { @Output() ngModelChange: EventEmitter<any> = new EventEmitter(); constructor(private el: ElementRef, private render: Renderer) { } @HostListener('keyup', ['$event']) onInputChange(event) { // get position let pos = this.el.nativeElement.selectionStart; let val = this.el.nativeElement.value; // if key is '.' and next character is '.', skip position if (event.key === '.' && val.charAt(pos) === '.') { // remove duplicate periods val = val.replace(duplicatePeriods, '.'); this.render.setElementProperty(this.el.nativeElement, 'value', val); this.ngModelChange.emit(val); this.el.nativeElement.selectionStart = pos; this.el.nativeElement.selectionEnd = pos; } } }
This works, except the cursor position jumps to the end. Removing the line:
this.ngModelChange.emit(val);
Fixes the issue and the cursor position is correct, however the model is not updated.
Can anyone recommend a solution to this? Or maybe I am taking the wrong approach to the problem?
Thanks
-
conor over 7 yearsI can confirm that this does work, and the flickering is not very noticeable. It is an acceptable solution. However, I was hoping to find a solution without using setTimeout.
-
António Quadrado over 5 yearsWell, this seems to be the best solution. It works flawlessly while the accept solution doesn't (maybe this was not available at the time of writing). If you type too fast you are able to overcome the setTimeout and get unexpected behavior.
-
Konrad Viltersten about 5 yearsIt doesn't work for some reason to set selectionStart and selectionEnd so your suggestion was awesome. Not sure why the others don't work (they are read correctly and used as parameters for setSelectionRange() but setting a value to them doesn't push the stupid marker to the right position.
-
FullStackOverflowDev over 4 yearsDoes not work in Angular 8 for me, I still had to wrap the function in
setTimeout()
. -
metodribic over 4 years@George I added stackblitz to my answer where you can see this solution works in Angular 8
-
FullStackOverflowDev about 4 years@metodribic I'm no longer working on that project so I can't test but it was being done from inside of a directive that did some other stuff including
ngModelChange.emit
so it could have been related to that. -
Ragul Parani over 3 yearsHowever when i type fast, the cursor goes to previous positions and causes issue
-
Ragul Parani over 3 yearsI am using Angular 6 and i faced this issue in Safari alone. This solution did not work for me