Javascript 删除.keydown（）中的一个样本捕获延迟

出于特殊原因，我使用JQuery的keydown（）事件过滤隐藏输入字段中的击键。然后，输入字段的值被复制到一个可见的div。问题是由于某种原因，我按下的键在下次按下键时被复制到div，这意味着输入延迟了一个周期

我已经尝试过keyup（），这个确实有效，但是我不喜欢在释放密钥时更新值的行为。我如何在保持keydown（）的同时立即更新

var-wordInput=''；
$（“#输入”）.keydown（函数（事件）{
var keycode=event.which；
开关（钥匙代码）{
//输入键
案例13：
console.log（'Submit'）；
//空格键
案例32：
console.log（'spacedisabled'）；
打破
//退格
案例8：
//对最后一个字符进行细分
wordInput=wordInput.substr（0，wordInput.length-1）；
打破
//还有别的钥匙吗
违约：
//如果未超过字符限制
如果（wordInput.length<20）{
wordInput+=$（'#input'）.val（）；//添加键入的字母
}             
}
//更新显示的单词
$（'#故事输入'）.html（wordInput）；
//清除输入
$（'#input'）.val（''）；
});对于这个实例，jQuery的钩子可能更合适。这样，它只会在按键释放后触发，并且值在输入框中。这将使其更加平滑，消除下一次按键触发上一次按下该值，而不是由当前按键结束触发。（包含的代码段中有演示。）


var-wordInput=''；
$（“#输入”）.keyup（函数（事件）{
var keycode=event.which；
开关（钥匙代码）{
//输入键
案例13：
console.log（'Submit'）；
//空格键
案例32：
console.log（'spacedisabled'）；
打破
//退格
案例8：
//对最后一个字符进行细分
wordInput=wordInput.substr（0，wordInput.length-1）；
打破
//还有别的钥匙吗
违约：
//如果未超过字符限制
如果（wordInput.length<20）{
wordInput+=$（'#input'）.val（）；//添加键入的字母
}             
}
//更新显示的单词
$（'#故事输入'）.html（wordInput）；
//清除输入
$（'#input'）.val（''）；
});

文本
这是因为首先触发事件并由代码处理，然后将字符添加到输入字段中。这使得
$（'#input'）.val（）返回以前输入的字符

您可以使用
String.fromCharCode（event.which）
，但这不会区分不同的大小写，您必须解析事件对象的修饰符键，并将字符转换为正确的大小写


另一种解决方案是使用
.keydown
像现在一样处理特殊键，使用
.keypress
处理字符键。原因是
。按键
不注册某些键，例如退格键

这结合了“两全其美”，它可以立即处理所有事件，您无需担心解析字符以使用正确的大小写

使用此代码或查看上的（固定）示例

$（“#输入”）.keydown（函数（事件）{
var=true；
开关（event.which）{
//输入键
案例13：
console.log（'Submit'）；
//空格键
案例32：
console.log（'spacedisabled'）；
打破
//退格
案例8：
//为最后一个字符下标
wordInput=wordInput.substr（0，wordInput.length-1）；
打破
//还有别的钥匙吗
违约：
防止=错误；
}
//更新显示的单词
$（'#故事输入'）.html（wordInput）；
//清除输入
$（'#input'）.val（''）；
//停止事件传播，将不执行按键
如果（防止）
event.stopPropagation（）；
});
$（“#输入”）。按键（函数（事件）{
如果（wordInput.length<20）{
wordInput+=String.fromCharCode（event.which）；//添加键入的字母
}
$（'#故事输入'）.html（wordInput）；
});
另一种解决方案的注释：唯一的缺点是
。按住键时，按键只注册一个字符，但我想您使用
。按键只用于退格，因此您可以按住它，然后用一次按键删除多个字符。我不认为常规键的
.keydown
对常规键有任何用处，因为用户在键入时按每个键，他们（通常）不会按住它。很好！我需要的是停止呼吸。那么，为了弄清楚，为什么按键会在之后发生？这仅仅是因为它低于按键代码吗？不，这是因为键盘事件是如何工作的。按此阅读有关键盘事件的更多信息。请注意，这不仅仅适用于jquery或javascript，而是系统范围内键盘事件的工作方式。它是
keydown
->
keypress
->
keydup
，由操作系统处理，程序或编程语言无法覆盖此事件序列。顺便说一句，如果这个答案对你有帮助，请接受它，我会很感激的。我不会认为顺序取决于操作系统。谢谢你的帮助！现在的问题是移动chrome不支持按键：(
$('#input').keydown(function(event) {
    var prevent = true;
    switch(event.which) {
        // Enter key
        case 13:    
            console.log('Submit');
        // Space key
        case 32:    
            console.log('Space disabled');
            break;
        // Backspace
        case 8:
            // Subscript the last char
            wordInput = wordInput.substr(0, wordInput.length - 1);
            break;
        // Any other key
        default:    
            prevent = false;
    }
    // Update the word displayed
    $('#story-input').html(wordInput);
    // Clear the  input
    $('#input').val('');

    // Stop event propagation, keypress will not be executed
    if(prevent)
        event.stopPropagation();
});

$('#input').keypress(function(event) {
    if (wordInput.length < 20) {
        wordInput += String.fromCharCode(event.which); // Add the typed letter
    }
    $('#story-input').html(wordInput);
});