Angular2 keyup事件更新ngModel光标位置跳转到结束

发布时间：2020-12-17 06:53:37 所属栏目：安全来源：网络整理

导读：我有一个Angular2指令的问题,应该执行以下操作：检测用户是否输入’.’字符. 如果下一个字符也是’.’,请删除重复的’.’并将光标位置移动到’.’之后烧焦我有上述工作,但是,当与ngModel结合使用时,每次更新模型时光标位置都会跳到最后. 输入： input type

我有一个Angular2指令的问题,应该执行以下操作：

>检测用户是否输入’.’字符.
>如果下一个字符也是’.’,请删除重复的’.’并将光标位置移动到’.’之后烧焦

我有上述工作,但是,当与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);

修复问题并且光标位置正确,但模型未更新.

任何人都可以推荐一个解决方案吗？或者我可能采取了错误的方法解决问题？

谢谢

解决方法

您需要在setTimeout()调用中包含以下行.原因是您需要为浏览器提供渲染新值的时间,然后才能更改在新值渲染后重置的光标位置.不幸的是,这会导致一点点闪烁,但我无法找到任何其他方法使其工作.

setTimeout(() => {
  this.el.nativeElement.selectionStart = pos;
  this.el.nativeElement.selectionEnd = pos;
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!