쉼표가 추가되면 캐럿이 뒤로 이동합니다

Question

저는 이오니아 (및 각도)를 사용하고 있습니다. 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의하고 renderer 유형 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); 
}