Question

FIDDLE DEMO

 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”输入字段更改，但如果我键入太快，我的代码无效。

Answer 1

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

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

<强> Demo

Answer 2

使用JavaScript而不是jQuery。 jQuery有很多开销，而且速度太慢。

可能不是这里的情况。你需要更好地解释这个问题。

我用我的代码进行了测试并且不会错过任何关键的击球。

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

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

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

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

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

以下内容经过测试：This test Location

<!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>

键入太快时未触发按键事件的功能

2 个答案: