eventListener按键无法正常工作<input>

Question

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"> 

Answer 1

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"> 

Answer 2

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">