大佬教程收集整理的这篇文章主要介绍了Angular2 keyup事件更新ngModel光标位置跳转到结束,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
>检测用户是否输入’.’字符.
>如果下一个字符也是’.’,请删除重复的’.’并将光标位置移动到’.’之后烧焦
我有上述工作,但是,当与ngModel结合使用时,每次更新模型时光标位置都会跳到最后.
输入:
<input type="text" name="test" [(ngModel)]="tesTinput" testDirective/>
指令:
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.ngModelChange.emit(val);
修复问题并且光标位置正确,但模型未更新.
任何人都可以推荐一个解决方案吗?或者我可能采取了错误的方法解决问题?
谢谢
以上是大佬教程为你收集整理的Angular2 keyup事件更新ngModel光标位置跳转到结束全部内容,希望文章能够帮你解决Angular2 keyup事件更新ngModel光标位置跳转到结束所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。