Javascript 按下按键和捕获键获取输入值

我正在使用

按键

事件

，我想在按键后在

输入

框中获取

值。我还想记录下按下了哪个键。在中，我只允许用户在
输入
框中输入数字（我知道有一个
数字
类型
用于输入）。我正在使用
setTimeout
从
输入
框中获取
值
。有没有更好的方法来实现这一点？这会失败吗


var elTest=document.getElementById（'test'）；
var elResult=document.getElementById（'result'）；
函数isNumber（evt，el）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
evt.preventDefault（）；
返回false；
}
setTimeout（函数（）{
elResult.textContent=el.value；
}, 0);
返回true；
}
eTest.addEventListener（“按键”，功能（e）{
返回isNumber（e，this）；
});
我认为在函数调用过程中，事件和对象混合在一起。如果您使用this.value，那么数字还不存在，但是如果您使用event.key（它给出键的字符串值），那么您应该得到正确的输出


var elTest=document.getElementById（'test'）；
var elResult=document.getElementById（'result'）；
函数isNumber（evt，el）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
evt.preventDefault（）；
返回false；
}否则{
elResult.textContent+=evt.key；
}
返回true；
}
eTest.addEventListener（“按键”，功能（e）{
返回isNumber（e，this）；
});
我认为在函数调用过程中，事件和对象混合在一起。如果您使用this.value，那么数字还不存在，但是如果您使用event.key（它给出键的字符串值），那么您应该得到正确的输出


var elTest=document.getElementById（'test'）；
var elResult=document.getElementById（'result'）；
函数isNumber（evt，el）{
evt=（evt）？evt:window.event；
var charCode=（evt.which）？evt.which:evt.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
evt.preventDefault（）；
返回false；
}否则{
elResult.textContent+=evt.key；
}
返回true；
}
eTest.addEventListener（“按键”，功能（e）{
返回isNumber（e，this）；
});
我会选择keydown和keyup事件监听器的组合，因为keypress事件不会在backspace或delete时触发

按下键时，检查数字、退格/删除输入，并在需要时防止输入

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

var elTest=document.getElementById（'test'）；
var elResult=document.getElementById（'result'）；
函数allowInput（evt）{
var charCode=（evt.which）？evt.which:evt.keyCode；
变量isNumber=charCode<58&&charCode>47；
var isBackspace=charCode==8 | | charCode==46；
返回isNumber | | isBackspace；
}
elTest.addEventListener（'keydown'，函数（e）{
如果（！allowInput（e））{
e、 预防默认值（）；
返回false；
}
返回true；
});
eTest.addEventListener（'keyup'，函数（e）{
elResult.textContent=this.value；
});
我会选择keydown和keyup事件监听器的组合，因为keypress事件不会在backspace或delete时触发

按下键时，检查数字、退格/删除输入，并在需要时防止输入

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

var elTest=document.getElementById（'test'）；
var elResult=document.getElementById（'result'）；
函数allowInput（evt）{
var charCode=（evt.which）？evt.which:evt.keyCode；
变量isNumber=charCode<58&&charCode>47；
var isBackspace=charCode==8 | | charCode==46；
返回isNumber | | isBackspace；
}
elTest.addEventListener（'keydown'，函数（e）{
如果（！allowInput（e））{
e、 预防默认值（）；
返回false；
}
返回true；
});
eTest.addEventListener（'keyup'，函数（e）{
elResult.textContent=this.value；
});
这不包括从值中删除一个数字，并且按下backspace/delete键时不会触发按键，这样这些键就不会被阻止的情况。@dhudson，我不是想解决所有情况，而是想让Anthony走上正确的轨道。同意当使用delete或backspace时，input的keyup用于抓取输入值，但上述代码无法解决此问题。这不包括从值中删除数字，并且按下backspace/delete时不会触发keypress的情况，因此不会阻止这些键。@dhudson，我并不是要解决所有的案件，而是想让安东尼走上正轨。同意当使用delete或backspace时，输入的keyup用于获取输入值，而上面的代码不能解决这个问题。