添加逗号时插入符号向后移动

Question

我正在使用 Ionic（和 Angular）。我有一个指令，它在使用 DecimalPipe 转换输入后更改输入的值。这些值仅为数字。

问题在于，当数字中添加逗号时（例如：当用户将值从 100 更改为 1,000 时），光标会向后移动一位。好像不在意加了个逗号

我的代码：

   let decimalPipe = new DecimalPipe(window.navigator.language);
   val = decimalPipe.transform(val, this.numberDecimal());


  this.model.valueAccessor.writeValue(val);
  this.renderer.setElementProperty(this.elementRef.nativeElement.querySelector('input'), 'value', val);

  this.model.viewToModelUpdate(val);

model 的类型为 NgControl and the renderer is of type Renderer。

Answer 1

问题仅针对 Android 设备。我没有找到解决方案，所以我写了一个解决方法，在 0 毫秒超时后更改插入符号的位置。

// before the change 
let inputElem = this.elementRef.nativeElement.querySelector('input');
let caretPos = inputElem.selectionStart;
let numOfCommas = (value.match(/,/g) || []).length;
...

//after the change
 let newNumOfCommas = (val.match(/,/g) || []).length;
 if (newNumOfCommas != numOfCommas)
 {
     setTimeout(() =>
     {
        let pos = newNumOfCommas > numOfCommas ? caretPos+1 : caretPos - 1;
        inputElem.setSelectionRange(pos, pos);
     }, 0);
 }

添加逗号时插入符号向后移动

Caret is moving backwards when a comma is added

caret

cursor-position

ionic-framework

angular