eventListener keypress对<input />不正确

Question

我知道在keypress eventlistener的元素中使用input进行击键是纯粹的疯狂。但我个人想亲自了解在这种情况下我做错了什么。

代码的目标 - 只允许在字段input中显示数字，禁止出现字母，以及使用键盘组合（alt，转移等）。

	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

当输入的值不是数字时，您需要致电e.preventDefault();。

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

您不需要getChar方法，因为该事件已有key属性。

＆＃13;

＆＃13;

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 );

＆＃13;

<input type="text"  id="inp">

＆＃13;

＆＃13;

＆＃13;