$ parserメソッドでキャレット位置を設定するとき

Question

ngModelController私はinput要素を使って書式を設定しています。しかし、ユーザーが最初または中に任意の数字を入力しようとすると、キャレットの位置を設定できません。キャレットはいつも最後に飛びます。

セットカーソルを呼び出すのに最適な場所は何ですか？

ngModelController.$parsers.unshift(function (viewValue) { 
       var plainNumber = viewValue.replace(/ /g, ''); 
       // $log.info(`viewValue = ${viewValue}`); 
       console.log(`$modelValue = ${ngModelController.$modelValue} | $viewValue = ${ngModelController.$viewValue}`); 
       console.log(`cursorPos = ${cursor.getCursorPos(elem[0])}`); 
       var newVal = "" 
       for (var i = 0; i < plainNumber.length; i++) { 
        if (i === 3 || i === 6) { 
         newVal += " "; 
        } 
        newVal += plainNumber[i]; 
       } 

       cursor.setCursorPos(cursor.getCursorPos(elem[0]) + 1, elem[0]); 

       // $log.info(`newVal = ${newVal}`); 
       elem.val(newVal); 
       return plainNumber; 
      }); 

Answer 1

同様の質問：

Preserving cursor position with angularjs

しかし、私は以下のコードを追加したが、他にも有用です。

ngModelController.$parsers.unshift(function (viewValue) { 
     var plainNumber = viewValue.replace(/ /g, ''); 
     // $log.info(`viewValue = ${viewValue}`); 
     console.log(`$modelValue = ${ngModelController.$modelValue} | $viewValue = ${ngModelController.$viewValue} | viewValue = ${viewValue} | cursorPos = ${cursor.getCursorPos(elem[0])} | oldVal = ${oldVal}`); 
     var newVal = "" 
     for (var i = 0; i < plainNumber.length; i++) { 
      if (i === 3 || i === 6) { 
       newVal += " "; 
      } 
      newVal += plainNumber[i]; 
     } 

     if(newVal === viewValue) { 
      return viewValue; 
     } 

     // $log.info(`newVal = ${newVal}`); 
     var lastCursorPos = cursor.getCursorPos(elem[0]); 
     elem.val(newVal); 
     ngModelController.$setViewValue(newVal); 
     ngModelController.$render(); 

     //cursor.setCursorPos(cursor.getCursorPos(elem[0]) + 1, elem[0]); 
     elem[0].setSelectionRange(lastCursorPos + 1, lastCursorPos + 1); 
     oldVal = newVal; 

     return plainNumber; 
    });