停止重新定位光标

Question

I have a number formatter in angular.

I need to get the cursor positioned in the place where i perform insert or delete a number.

Currently after the insert or delete the cursor gets appended in the end(I dont need this behavior i want the cursor to stay there)

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

My working code is please feel free to fork from here

Answer 1

You could use the selectionStart and selectionEnd properties of an input field to get the current cursor position, then the setSelectionRange() method to set it once the value has been updated (See here for API reference).

To do this, you can modify the keydown event handler to store the value before change (including commas) and the cursor position:

$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++;
    }
    ...
});

The above code increments the cursor position if the delete key is pressed (instead of backspace) as the cursor position will remain the same then (taking into account the currency formatting commas of course).

The listener function can then be modified to calculate the difference in length of the currency value (including formatting commas) and set the cursor position accordingly after typing a key:

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

See here for a working demo.