Keydown处理前一个字符而不是当前字符 [英] Keydown processes previous character instead of current one
问题描述
我尝试用jquery和ajax创建一个MS-Dos仿真窗口. 效果很好，但是当我键入一个单词或按Enter键时，脚本显示的字符太晚了(第一次按时不显示任何字符，然后，对于每个下一次按键，它将显示用户键入的前一个字符，而不是当前的字符).
I try to create an MS-Dos emulation window with jquery and ajax. It works well but when I type a word or press enter, the script is one character too late on display (no character displayed on first press then, for each next keydown, it shows the previous character typed by the user instead of the current one).
这是我的脚本的简化版本:
Here is a simplified version of my script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/terminal.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//set cursor position
$('#cursor').css('left','0px');
//focus on textfield
$('#field').focus();
//On key down...
$('#field').keydown(function(event)
{
request=$(this).val();
count=$(this).val().length;
//Display chars as they come
$("#instruct").html(request);
// If "enter" is pressed
if (event.which == 13)
{
event.preventDefault();
//clean user entry
request=request.replace(/\n/g, "");
// Process user entry
$.ajax({
type: "POST",
url: "scripts/ajax/terminal.php",
data: {command:request},
success: function(response)
{
// if user typed something before pressing "enter"
if(response !='')
{
// update list by logging the previous entry, showing system response and clearing the textarea
$('#log').append("<li class='user'>--- ><span>"+request+"</span></li>");
$('#log').append("<li class='sys' >SYS ><span>"+response+"</span></li>");
$('#field').val('');
}
}
});
}
});
});
</script>
</head>
<body>
<ul id="log">
<li class='sys'>Sys ><span>Identification required</span></li>
</ul>
<ul id="realtime">
<li id="live-space">
<span class="user-line">--- ></span>
<textarea type="text" id="field"></textarea>
<div>
<span id="instruct"></span><div id="cursor">_</div>
</div>
</li>
</ul>
</body>
</html>
我确定"keyDown"在应有的情况下会被触发，因为当我更改此内容时
I'm sure "keyDown" is fired when it should because when I change this
$("#instruct").html(request);
进入此
$("#instruct").html(request+'x');
..."x"将在第一次按键后直接显示，而"request"内容将延迟到下一次按键(例如，如果我键入"a"，则只会看到"x"，而当我立即输入"b"时，我看到"ax"，等等.)
...the "x" will show up directly after the first keydown while the "request" content will be delayed to the next keydown (for instance, if I type "a", I will only see "x" and when I type "b" immediatly after, I see "ax", etc...).
因此，这与触发按键无关，而是在正确的时间选择正确的角色.
So it's not about firing the keydown but about picking the right character at the right time.
我该怎么办?
谢谢.
推荐答案
Working demo
在捕获字段之前，不会更新该字段的值，只需附加按下的键的char，但是如果您使用keydown，则String.fromCharCode(event.which)返回大写字符char，因此请使用keypress
The field's value isn't being updated before you catch it, just append the char of key pressed, but String.fromCharCode(event.which) returns the uppercase char if you use keydown so use keypress
$('#field').on('keypress',function(event){
request=$(this).val() + String.fromCharCode(event.which);
...
或者您可以使用
$('#field').on('keyup',function(event){
request=$(this).val(); // value is ready by now
...
但是由于您正在等待释放键，因此反馈显示的速度较慢
but the feedback appears slower because you're waiting for the key to be released
这篇关于Keydown处理前一个字符而不是当前字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
