keydown event new value

Since this is litteraly the first result that comes up when searching for "how to get the new value on input keydown" im posting a working answer here.

This should be sufficient for a lot of cases, but i recommend checking if "keyup" or "input" or any other event is more fitting for your individual problem.

function getNewInputValue(e) {
      let newValue = e.target.value;
      let valueArray = newValue.split('');
      const selectionLength = (e.target.selectionEnd - e.target.selectionStart);
      if (e.key === 'Backspace') {
        if (selectionLength === 0 && e.target.selectionStart > 0) {
          valueArray.splice(e.target.selectionStart - 1, selectionLength + 1);
        } else {
          valueArray.splice(e.target.selectionStart, selectionLength);
        }
      } else if (e.key === 'Delete') {
        if (selectionLength === 0) {
          valueArray.splice(e.target.selectionStart, selectionLength + 1);
        } else {
          valueArray.splice(e.target.selectionStart, selectionLength);
        }
      } else {
        valueArray.splice(e.target.selectionStart, selectionLength, e.key);
      }
      newValue = valueArray.join('');
      return newValue;
}

if you use this snipped to prevent input if the new value does not fit your criteria you should also consider not checking when some "quality of life" features are triggered by the pressed key.

Im talking about navigating inside the input with the arrowkeys, or navigating to the next control by pressing tab and so on.

These are the keys i ignore:

const ignoredKeys = [
    'ArrowLeft',
    'ArrowRight',
    'Tab',
    'End',
    'Home',
    'ArrowUp',
    'ArrowDown',
  ];

You should not use keydown but keypress. Then you will receive the actual character code of the char to-be-typed.

See keypress, keydown, keyup value of input box AFTER event, http://www.quirksmode.org/dom/events/keys.html and especially http://www.quirksmode.org/js/keys.html.

inputElement.addEventListener("keypress", function(e) {
     var curval = e.srcElement.value;
     var newchar = String.fromCharCode(e.charCode || e.keyCode);
     if (/* condition */)
         e.preventDefault();
}, false);

If you just want to get the input value after something is typed, you need to use the keyup event.

I'm not sure if it could be of any help, but when I had to deal with a similar situation in an event listener I used a setTimeout() with 1ms timeout where I put the main functionality checking for the value, etc.

That is because when the keydown event is fired the input field is not yet populated with the new data.

Simple jQuery example:

$('#input').on('keydown', function(e) {
  var field = $(this);
  var prevValue = field.val();
  setTimeout(function() {
    // check if new value is more or equal to 255
    if (field.val() >= 255) {
      // fill with previous value
      field.val(prevValue);
    }

  }, 1);
});

UPDATE

Use 'input' event in modern browsers.

var prevValue = 0;
$('#input').on('input', function(e) {
  var field = $(this);
  // check if new value is more or equal to 255
  if (field.val() >= 255) {
    // fill with previous value
    field.val(prevValue);
  } else {
    // If value is lower than 255 set it in prev value.
    prevValue = field.val();
  }
});