如何防止我的 keyup 函数延迟一个字符?
How can I prevent my keyup function to be one character delayed?
我有一个 textarea
,当我写东西时,文本应该同时出现在我的 result
框中。
我正在使用 keyup
函数并且还测试了 keydown
。但我的问题是,插入延迟了一个字符。或者如果我写得快,它可以是更多的字符。
例如我写
abcdf
进入我的 textarea
并在我的 result
框中结果是
abcd
如果我添加另一个字符,例如 z
,则会出现 f
。
$(document).off("click", ".button").on("click", ".button", function (event) {
$.ajax({
url: "update.php",
data: {
},
type: "POST",
success: function (data) {
$('.textarea').wysihtml5({
events: {
load: function() {
var some_wysi = $('.textarea').data('wysihtml5').editor;
$(some_wysi.composer.element).bind('keyup', function(){
var text = $( ".textarea").val();
$(".box[data-select='true']").find($('.result')).val(text);
}
}
}
})
}
})
}
<button class="button">button</button>
<textarea class="textarea"></textarea>
<div class="box" data-select="true"><div class="result"></div></div>
一般来说,在观察用户输入的字段变化时,键盘事件不是应该观察的正确对象。考虑用户右键单击该字段并从上下文菜单中选择 "paste" 的情况。还有一个问题是事件发生的顺序与更新字段的值有关。
相反,使用 input
事件,或(在您的特定情况下)您的所见即所得编辑器提供的任何 "the value changed" 事件(可能是 change
或其他)。
如果 none 记录的事件有效,非常不完善 的解决方案可能是通过 setTimeout
将您的更新延迟一个事件循环周期。
// A flag so we don't schedule timer callbacks repeatedly
var timerPending = false;
// Our callback function
function handleUpdate() {
timerPending = false;
var text = $( ".textarea").val();
$(".box[data-select='true']").find($('.result')).val(text);
}
// Hook a bunch of events to try to get as broad a set of notifications as possible
$(some_wysi.composer.element).bind('keydown keyup keypress input change', function() {
// Since we're hooking multiple events, we may get multiple notifications
// within the same event loop; only setup a timer callback for the first one
if (!timerPending) {
timerPending = true;
setTimeout(handleUpdate, 0);
}
}
我有一个 textarea
,当我写东西时,文本应该同时出现在我的 result
框中。
我正在使用 keyup
函数并且还测试了 keydown
。但我的问题是,插入延迟了一个字符。或者如果我写得快,它可以是更多的字符。
例如我写
abcdf
进入我的 textarea
并在我的 result
框中结果是
abcd
如果我添加另一个字符,例如 z
,则会出现 f
。
$(document).off("click", ".button").on("click", ".button", function (event) {
$.ajax({
url: "update.php",
data: {
},
type: "POST",
success: function (data) {
$('.textarea').wysihtml5({
events: {
load: function() {
var some_wysi = $('.textarea').data('wysihtml5').editor;
$(some_wysi.composer.element).bind('keyup', function(){
var text = $( ".textarea").val();
$(".box[data-select='true']").find($('.result')).val(text);
}
}
}
})
}
})
}
<button class="button">button</button>
<textarea class="textarea"></textarea>
<div class="box" data-select="true"><div class="result"></div></div>
一般来说,在观察用户输入的字段变化时,键盘事件不是应该观察的正确对象。考虑用户右键单击该字段并从上下文菜单中选择 "paste" 的情况。还有一个问题是事件发生的顺序与更新字段的值有关。
相反,使用 input
事件,或(在您的特定情况下)您的所见即所得编辑器提供的任何 "the value changed" 事件(可能是 change
或其他)。
如果 none 记录的事件有效,非常不完善 的解决方案可能是通过 setTimeout
将您的更新延迟一个事件循环周期。
// A flag so we don't schedule timer callbacks repeatedly
var timerPending = false;
// Our callback function
function handleUpdate() {
timerPending = false;
var text = $( ".textarea").val();
$(".box[data-select='true']").find($('.result')).val(text);
}
// Hook a bunch of events to try to get as broad a set of notifications as possible
$(some_wysi.composer.element).bind('keydown keyup keypress input change', function() {
// Since we're hooking multiple events, we may get multiple notifications
// within the same event loop; only setup a timer callback for the first one
if (!timerPending) {
timerPending = true;
setTimeout(handleUpdate, 0);
}
}