eventListener keypress does not work correcly for the <input>

73 Views Asked by At

I understand that using an keypress eventlistener for the keystrokes in an element of the input is pure madness. But I personally want to understand for myself what is I'm doing wrong in this case.

The objective of the code - is to allow only numbers to be displayed in the field input, prohibiting the appearance of letters, as well as the use of keyboard combinations (alt, shift, etc).

 function onDown(e) {
   e = e || event;

   if (e.ctrlKey || e.altKey || e.metaKey) return; // false for key cominations

   var chr = getChar(e);

   if (chr == null) return;

   if (chr < '0' || chr > '9') { // if "chr" do not a digit - false
     return false;
   }
 }

 function getChar(event) { // support func to get the char from keyCode
   if (event.which == null) { 
     if (event.keyCode < 32) return null; 
     return String.fromCharCode(event.keyCode)
   }

   if (event.which != 0 && event.charCode != 0) { 
     if (event.which < 32) return null; 
     return String.fromCharCode(event.which);
   }

   return null; 
 }

 inp.addEventListener( 'keypress', onDown );
 <input type="text"  id="inp">

2

There are 2 best solutions below

0
Ele On BEST ANSWER

You need to call e.preventDefault(); when the entered value is not a number.

function onDown(e) {
  e = e || event;
  if (e.ctrlKey || e.altKey || e.metaKey) return; // false for key cominations

  var chr = getChar(e);
  if (chr == null) return;

  if (chr < '0' || chr > '9') { // if "chr" do not a digit - false
    e.preventDefault();
  }
}

function getChar(event) { // support func to get the char from keyCode
  if (event.which == null) {
    if (event.keyCode < 32) return null;
    return String.fromCharCode(event.keyCode)
  }

  if (event.which != 0 && event.charCode != 0) {
    if (event.which < 32) return null;
    return String.fromCharCode(event.which);
  }

  return null;
}

inp.addEventListener('keypress', onDown);
<input type="text" id="inp">

0
Marko Mackic On

You don't need the getChar method because event already has key property.

function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function onDown(e) {
  e = e || event;
  
  if (e.ctrlKey || e.altKey || e.metaKey || e.shift) return; // false for key cominations
    
  if(!isNumeric(e.key)) e.preventDefault();
}

inp.addEventListener( 'keypress', onDown );
<input type="text"  id="inp">