通过按键获取输入值并按下捕获键答案

【问题标题】：Get value of input with keypress and capture key pressed通过按键获取输入值并按下捕获键
【发布时间】：2016-10-19 20:44:19
【问题描述】：

我正在使用keypressevent，并且我想在按下一个键后在input 框中获取value。我还想捕捉按下了哪个键。在this example 中，我只允许用户在input 框中输入数字（我知道有一个number type 用于输入）。我正在使用setTimeout 从input 框中获取value。有没有更好的方法来实现这一点？这会失败吗？

var elTest = document.getElementById('test');
var elResult = document.getElementById('result');

function isNumber(evt, el) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    evt.preventDefault();
    return false;
  }
  setTimeout(function () {
    elResult.textContent = el.value;
  }, 0);
  return true;
}

elTest.addEventListener('keypress', function(e) {
  return isNumber(e, this);
});

<input id='test' />
<div id='result'>

</div>

【问题讨论】：

标签： javascript html keypress

【解决方案1】：

我会结合使用 keydown 和 keyup 事件侦听器，因为 keypress 事件不会在退格或删除时触发。

在 keydown 时，检查数字、退格/删除输入并在需要时阻止。

在 keyup 时，根据输入值更新结果输出。

var elTest = document.getElementById('test');
var elResult = document.getElementById('result');

function allowInput(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    var isNumber = charCode < 58 && charCode > 47;
    var isBackspace = charCode == 8 || charCode == 46;
    return isNumber || isBackspace;
}

elTest.addEventListener('keydown', function (e) {
    if (!allowInput(e)) {
        e.preventDefault();
        return false;
    }
    return true;
});

elTest.addEventListener('keyup', function (e) {
    elResult.textContent = this.value;
});

【讨论】：

【解决方案2】：

我想你刚刚在函数调用期间得到了事件和这个对象。如果你使用 this.value，那么数字不会在那里，但如果你使用 event.key（它给出键的字符串值），那么你应该得到正确的输出。

var elTest = document.getElementById('test');
var elResult = document.getElementById('result');

function isNumber(evt, el) {
  evt = (evt) ? evt : window.event;
  var charCode = (evt.which) ? evt.which : evt.keyCode;
  if (charCode > 31 && (charCode < 48 || charCode > 57)) {
    evt.preventDefault();
    return false;
  } else {
    elResult.textContent += evt.key;
  }
  return true;
}

elTest.addEventListener('keypress', function(e) {
  return isNumber(e, this);
});

<input id='test' />
<div id='result'>

</div>

【讨论】：

这不包括从值中删除数字并且按下退格/删除键时不会触发按键的情况，因此不会阻止这些键。
@dhudson，我并没有试图解决所有情况，而是试图让 Anthony 走上正轨。同意当使用 delete 或 backspace 时，输入的 keyup 可以获取输入值，上面的代码不能解决这个问题。