打字太快时不触发按键事件的功能

function for keypress event not triggered when typing too fast

本文关键字：事件 功能      更新时间：2023-09-26

小提琴演示

 var oldValue;
$(document).on('keydown','.main', function (e) {
    oldValue = $(this).val(); 
});
var newValue;
$(document).on('keyup', '.main',function (e) {
    newValue = $(this).val();
     foo(oldValue,newValue);
});
function foo(orig){
$('#table2').find('tbody tr').each(function (i) {
        var $td2 = $(this).find('td input:text');
        if (orig == $td2.val()) {
            $td2.val(newValue);
        }
    });
}

这就是发生的事情，如果我在表 1 上缓慢键入"Apple"，"Apple"输入字段会发生变化，但如果我输入太快，我的代码将无法正常工作。

如果在原始输入字段和相应的类似字段之间添加一些关系怎么办：

 <input type='text' class= 'main' value="Apple" rel="sec_apple"/>

和 

<input type='text' value="Apple"  class="sec_apple"/>

对于第二个输入。

然后你的javascript可能看起来像这样：

$(document).on('keyup', '.main',function (e) {
    foo($(this));
});
function foo(orig){
    rel = orig.attr('rel');    
    var sec = $('.' + rel);
    sec.val(orig.val());    
}

演示

使用 JavaScript 而不是 jQuery。 jQuery有很多开销，而且可能太慢了。

这里可能不是这种情况。 您确实需要更好地解释这个问题。

我运行了一个测试，不能错过我的代码击键。

我的测试例程会更改每个 onkeyup 的背景颜色。

我只使用了苹果和香蕉右侧表1中的两个文本输入。

因为我不明白你在做什么，所以我的测试例程会改变每个 onkeyup 的背景颜色。如果我在两个文本字段中尽可能快地输入123456789，它们都以正确的颜色结尾。

您可能会注意到，我全局声明输入并使用数组而不是 if else。使用jQuery无法有效完成的事情。

我放弃jQuery的原因是我发现jQuery在iPad上太慢了。

以下测试地点：此测试位置

<!DOCTYPE HTML>
<html lang="en"><head><title>keys</title></head><body>
Table1
<form id='form1'>
<table id='table1'><tbody>
<tr><td><input type='text' class= 'main' value="Apple"/></td>
<td><input id="t1" type='text' class= 'main' value="" onkeyup="key(1)"/></td>
</tr><tr>
<td><input type='text' class= 'main' value="Banana" /></td><td><input id="t2" type='text' value="" onkeyup="key(2)"/></td>
</tr></tbody></table>
Table2
<table id='table2'><tbody>
<tr><td><input type='text' value="Apple" /></td></tr>
<tr><td><input type='text' value="Banana" /></td></tr>
<tr><td><input type='text' value="Banana" /></td></tr>
</tbody></table>
<br />
</form>
<script type="text/javascript">
//<![CDATA[
var color = new Array;
color[0] = '#f00';
color[1] = '#f0f';
color[2] = '#ff0';
color[3] = '#0ff';
var nc=[0,0,0];
var next = [1,2,3,0];
var txt=new Array;
txt[1] = document.getElementById('t1');
txt[2] = document.getElementById('t2');
function key(id){
nc[id] = next[nc[id]];
txt[id].style.background=color[nc[id]];
}
//]]></script></body></html>
相关文章：