javascript - 停止重新定位光标

Question

我有一个 Angular 数字格式化程序。

我需要将光标定位在执行插入或删除数字的位置。

当前在插入或删除之后，光标被附加在末尾(我不需要这种行为，我希望光标保留在那里)

  // This runs when we update the text field
  ngModelCtrl.$parsers.push(function(viewValue) {
    return viewValue.replace(/,/g, '');
  })

我的工作代码是请随意从 here fork

Answer 1

您可以使用输入字段的 selectionStart 和 selectionEnd 属性来获取当前光标位置，然后使用 setSelectionRange() 方法值更新后进行设置(请参阅 here 以获取 API 引用)。

为此，您可以修改 keydown 事件处理程序以存储更改前的值(包括逗号)和光标位置:

$element.bind('keydown', function(event) {
    // Store previous value (including commas) and cursor position
    prevVal = $element.val();
    start = $element[0].selectionStart;
    end = $element[0].selectionEnd;

    if (key == 46) {
        // Delete pressed, so increment cursor position
        start++;
        end++;
    }
    ...
});

如果按下删除键(而不是退格键)，上面的代码会增加光标位置，因为光标位置将保持不变(当然要考虑到货币格式逗号)。

然后可以修改listener函数来计算货币值的长度差异(包括格式逗号)，并在键入按键后相应地设置光标位置:

var listener = function() {
    ...
    // Calculate new cursor position and update
    var diff = $element.val().length - prevVal.length;
    $element[0].setSelectionRange(start+diff, end+diff); 
    ....
}

参见here一个工作演示。