Javascript 同步相同的html表单

我希望在我的网站上有两个（甚至更多）相同的html表单。
例如，一个位于页面顶部，另一个位于页面底部。
我希望他们在任何给定的时间都有完全相同的内容。如果用户更改其中一个中的值，则会更新所有其他值。
有没有比javascript

onchange

/

onkeyup

事件更好的同步方法？

onchange

仅在元素失去焦点后激发。

---

onkeyup

也不完美。它在长文本复制上浪费了大量cpu，如果元素在

onkeydown

和

onkeydup

事件之间失去焦点，它就不会启动。

更新：我刚刚了解到HTML5有一个更合适的事件，

oninput

，但当然它在旧浏览器中不起作用

oninput

将检测任何类型的文本更改，包括右键单击菜单中的粘贴、剪切和删除。因此，最好的选择可能是检查浏览器是否支持

oninput

（例如，通过使用推荐的功能），如果不支持，则返回到下面的方法。在旧版本的IE上，

onpropertychange

可用于模拟

oninput

---

我决定根据KnockoutJS如何实现这一点来改变我的答案。从淘汰文档中：

“afterkeydown”-在用户开始键入 性格这是通过捕获浏览器的keydown事件并处理该事件来实现的 异步的

在这些选项中，“afterkeydown”是保持视图模型的最佳选择 实时更新

它通过使用时间值为零的

setTimeout

来完成异步行为。除此之外，它看起来就像一个常规的

keydown

事件处理程序

下面是一个简单的例子，使用jQuery，我相信它的行为相当于Knockout的“afterkeydown”事件：

注: 这不会捕获右键单击粘贴事件和拖放事件。如果您还想更新这些事件的文本，只需以与键控相同的方式收听它们，例如：

$('#email').on('keydown paste drop', function() {
    setTimeout( $.proxy(handler, this), 0);
});

与

keydown

类似，

paste

和

drop

也需要

setTimeout

以更新文本的最新值

原始答复：

onkeyup

可能是一个不错的选择，但是如果元素在keydown和keyup之间失去焦点，您可以提出一个很好的观点：不触发。基于，我非常确定解决方案是在容器元素（或主体上）上侦听keyup事件，尽管在这种情况下，将其绑定到

元素可能最有意义

---

至于粘贴时的CPU使用情况，您可以尝试取消该事件，除非经过一定的时间（例如50毫秒）…希望这足够了。如果没有，你可以看看一些流行的双向数据绑定框架是如何处理的……我见过的大多数框架都使用了

onkeyup

你可以尝试类似knockoutjs的东西，可能有点太重了，不适合仅仅同步两个表单。。。为什么不呢，当一个字段被聚焦时，它会从另一个字段（如果它在那里的话）获取数据。如果没有，它什么也做不了。如果是我，我可能会在模糊事件上做些什么。@Leeish它看起来会很粗糙，我改变了答案；请看下面。对于那些感兴趣的人，这是knockout.js中的相关源文件：（搜索“keydown”）。这种方法仍然不是很快，但我认为不使用javascript所缺乏的指针就不可能加快速度。否则，这很好，谢谢。对我来说，“afterkeydown”方法的响应速度似乎比听keyup和blur（因为你描述的keyup之前的问题失去了焦点，所以是blur而不是change）…如果背景中还有其他事情发生，我想这可能不是真的。这些是让Javascript立即响应文本更改的唯一方法。

$('#email').on('keydown paste drop', function() {
    setTimeout( $.proxy(handler, this), 0);
});