87,989
社区成员
发帖
与我相关
我的任务
分享两个文本框文本联动出现的问题
<body>
<form name="f1">
<input type="text" name="t1" onkeydown="document.f1.t2.value=document.f1.t1.value" />
<input type="text" name="t2" />
</form>
</body>
上面的代码小弟目的是想实现两个文本框的联动输入（英文），但是效果却不太好，输入的时候t2比t1慢一拍，比如t1输入abcd，此时t2的内容为abc。请问是为什么？
ps：用setTimeout可以实现这个效果，我想问一下上面的问题。
<form name="f1">
<input type="text" name="t1" onkeydown="document.f1.t2.value=document.f1.t1.value" />
<input type="text" name="t2" />
</form>
</body>
上面的代码小弟目的是想实现两个文本框的联动输入（英文），但是效果却不太好，输入的时候t2比t1慢一拍，比如t1输入abcd，此时t2的内容为abc。请问是为什么？
ps：用setTimeout可以实现这个效果，我想问一下上面的问题。
...全文
请发表友善的回复…
发表回复
liangws 2011-10-12
- 打赏
- 举报
喔，结贴了？看来楼主不太认同我的回答。泪奔。。。
liangws 2011-10-12
- 打赏
- 举报
楼主可以看看javascript引擎线程,界面渲染线程,浏览器事件触发线程的关系
liangws 2011-10-12
- 打赏
- 举报
这个要理解js线程了，我比较简单的说下吧
开始我们js线程队列为空
当我们点击一个按键的时候触发里面的方法"document.f1.t2.value=document.f1.t1.value"，我们定义为t1,
队列就push了t1，当t1进入队列后，渲染线程t2才形成并进入队列，因此在执行t1的时候，t2还没执行，所以document.f1.t2.value还是之前的状态，就导致了为什么会慢一拍的效果，
而楼主说加上setTimeout就可以，onkeydown="setTimeout(function(){document.f1.t2.value=document.f1.t1.value},0)"
是因为setTimeout会将函数放到队列的末尾执行，无论定时的毫秒数是多少都一样，所以这里面设置为0或者其他都没关系
而用onkeyup没问题的原因是当点击按键会先触发onkeydown,所以渲染线程t2会在onkeyup=""前面执行，。。因此document.f1.t2.value已经是最新的状态了
开始我们js线程队列为空
当我们点击一个按键的时候触发里面的方法"document.f1.t2.value=document.f1.t1.value"，我们定义为t1,
队列就push了t1，当t1进入队列后，渲染线程t2才形成并进入队列，因此在执行t1的时候，t2还没执行，所以document.f1.t2.value还是之前的状态，就导致了为什么会慢一拍的效果，
而楼主说加上setTimeout就可以，onkeydown="setTimeout(function(){document.f1.t2.value=document.f1.t1.value},0)"
是因为setTimeout会将函数放到队列的末尾执行，无论定时的毫秒数是多少都一样，所以这里面设置为0或者其他都没关系
而用onkeyup没问题的原因是当点击按键会先触发onkeydown,所以渲染线程t2会在onkeyup=""前面执行，。。因此document.f1.t2.value已经是最新的状态了
Legend1988 2011-10-12
- 打赏
- 举报
晕，先谢谢你。那为什么我用onkeypress不可以呢？[Quote=引用 1 楼 ootwo 的回复:]
<body>
<form name="f1">
<input type="text" name="t1" onkeyup="document.f1.t2.value=document.f1.t1.value" />
<input type="text" name="t2" />
</form>
</body>
[/Quote]
<body>
<form name="f1">
<input type="text" name="t1" onkeyup="document.f1.t2.value=document.f1.t1.value" />
<input type="text" name="t2" />
</form>
</body>
[/Quote]
twinsbaiqing 2011-10-12
- 打赏
- 举报
<form name="f1">
<input type="text" name="t1" onKeyUp ="document.f1.t2.value=document.f1.t1.value" />
<input type="text" name="t2" />
</form>
<input type="text" name="t1" onKeyUp ="document.f1.t2.value=document.f1.t1.value" />
<input type="text" name="t2" />
</form>
ootwo 2011-10-12
- 打赏
- 举报
<body>
<form name="f1">
<input type="text" name="t1" onkeyup="document.f1.t2.value=document.f1.t1.value" />
<input type="text" name="t2" />
</form>
</body>
<form name="f1">
<input type="text" name="t1" onkeyup="document.f1.t2.value=document.f1.t1.value" />
<input type="text" name="t2" />
</form>
</body>
Legend1988 2011-10-12
- 打赏
- 举报
不好意思，我是结完贴才看到你的回答，不过你讲的东西我确实还没看明白，回头好好琢磨琢磨，下次有机会再给分了哈[Quote=引用 6 楼 liangws 的回复:]
喔，结贴了？看来楼主不太认同我的回答。泪奔。。。
[/Quote]
喔，结贴了？看来楼主不太认同我的回答。泪奔。。。
[/Quote]
