Question

我正在使用keypress event，我希望在按下某个键后，在value框中显示input。我还想捕获哪个键被按下了。在this example我只允许用户在input框中输入数字（我知道输入有number type。我正在使用setTimeout从value框中获取input。有没有更好的方法来实现这一目标？这会失败吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我认为你刚刚得到了这个事件，并且在函数调用期间这个对象是混合的。如果你使用this.value，那么这个数字还没有，但如果你使用event.key（它给出了键的字符串值），那么你应该得到正确的输出。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

在键盘上，更新输入值的结果输出。

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 个答案: