javascript - 删除 .keydown() 中的单样本捕获延迟

Question

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

我已经尝试过 keyup() 并且这个确实有效，但是我不喜欢在释放 key 时更新值的行为。如何在保持 keydown() 的同时即时更新？

var wordInput = '';

$('#input').keydown(function(event) {
    var keycode = event.which;
    switch(keycode) {
    	// Enter key
    	case 13: 	
    		console.log('Submit');
	    // Space key
        case 32: 	
        	console.log('Space disabled');
        	break;
    	// Backspace
    	case 8:
            // Subscract the last char
            wordInput = wordInput.substr(0, wordInput.length - 1);
    		break;
    	// Any other key
		default: 	
			// If char limit not exceeded
			if (wordInput.length < 20) {
                wordInput += $('#input').val(); // Add the typed letter
            }             
    }
    // Update the word displayed
    $('#story-input').html(wordInput);
    // Clear the  input
    $('#input').val('');
});

查看此处的示例:http://jsfiddle.net/mqbxqLp7/

Answer 1

这是因为事件首先被触发并由您的代码处理，然后字符被添加到输入字段。这使得 $('#input').val() 返回先前输入的字符。

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

<小时/>

替代解决方案是像现在一样使用 .keydown 来处理特殊键，并使用 .keypress 来处理字符键。原因是 .keypress 没有注册某些键，例如退格键。

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

使用此代码或查看 jsfiddle 上的(固定)示例.

$('#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);
});