Question

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

我已经尝试过keyup（）并且这个确实有效，但我不喜欢在释放密钥时更新值的行为。如何在保持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没有注册某些键，例如退格键。

这结合了两个世界中最好的＆＃34;，它立即处理所有事件，您不必担心解析字符以使用正确的案例。

使用此代码或查看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);
});

Answer 2

对于这个例子，jQuery的keyup()钩子可能更合适。这样，它只会在释放键后触发，并且值在输入框中。这应该使它更顺畅，消除下一个按键触发前一次按下该值，而不是由当前按键结束触发。（包含在代码片段中的演示。）

＆＃13;

var wordInput = '';

$('#input').keyup(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('');
    
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="story-input">text</div>
<input type="text" id="input" style="opacity: 1">

＆＃13;

但是，请注意，用户可以通过按住单个字符来绕过长度要求，因此检查wordInput长度与#input长度的总和可能是明智的。 }。

删除.keydown（）中的单样本捕获延迟

2 个答案: