Question

I’ve written simple JavaScript mask that allows you to write only numbers to input. But the thing is, when you press arrow key, the caret will move back to the end of the line.

How can I ignore arrow keys, or other meta keys?

Here’s my mask:

function applyMaskInteger(elementId) {
    var e = document.getElementById(elementId);
    e.value = e.value.replace(/[^0-9]/g,"");
}

PS: I like jQuery, but please answer only with plain JavaScript … (we don’t use jQuery on this project)

Answer 1

I guess it’s a regular <input type="text">.

You can move the caret (at least in modern browsers) by altering the values of its selectionStart and selectionEnd properties.

function applyMaskInteger(elementId) {
  var input = document.getElementById(elementId);
  var value = input.value;
  var caret = input.selectionEnd;

  // apply the mask
  input.value = value.replace(/[^0-9]/g,"");

  if (typeof caret !== 'undefined') {
    // count the resulting characters before the caret
    var prefix = value.substr(0, caret);
    prefix = prefix.replace(/[^0-9]/g,"");
    // move the caret
    input.selectionStart = prefix.length;
    input.selectionEnd = prefix.length;
  }
}