同步相同的 html 表单

Question

我希望我的网站上有两个（甚至更多）相同的 html 表单。
例如，一个 - 位于页面顶部，另一个 - 位于页面底部。
我想要的是让他们在任何给定时间都拥有完全相同的内容。如果用户更改其中一个值，则其余所有值都会更新。
有没有比 javascript onchange/onkeyup 事件更好的同步方法？
onchange 仅在元素失去焦点后触发。
onkeyup 也不完美。它会在长文本复制上浪费大量 CPU，并且如果元素在 onkeydown 和 onkeyup 事件之间失去焦点，则不会触发。

Answer 1

更新：我刚刚了解到 HTML5 有一个更合适的事件，oninput，但它当然不适用于旧浏览器。 oninput 将检测任何类型的文本更改，包括右键菜单中的Paste、Cut 和Delete。所以最好的选择可能是检查浏览器是否支持oninput（例如通过使用推荐的功能here），如果不支持则回退到下面的方法。在老版本的IE上，onpropertychange可以用来模拟oninput。

---

我决定根据 KnockoutJS 的实现方式来改变我的答案。来自 Knockout 文档中的 this page：

"afterkeydown" - 用户开始输入时立即更新视图模型 特点。这通过捕获浏览器的 keydown 事件并处理该事件来工作 异步。

在这些选项中，如果您想保留视图模型，“afterkeydown”是最佳选择 实时更新。

它通过使用时间值为零的setTimeout 来完成异步行为。除此之外，它看起来就像一个普通的keydown 事件处理程序。

这是一个使用 jQuery 的简单示例，我认为它的行为等同于 Knockout 的“afterkeydown”事件：

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

function handler() {
    console.log( this.value );
}

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

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

像keydown、paste 和drop 也需要setTimeout 才能使用文本的最新值进行更新。

原答案：

onkeyup 可能是要走的路，但是如果元素在 keydown 和 keyup 之间失去焦点，你会提出一个很好的观点，即它不会触发。基于this answer，我很确定解决方案是侦听容器元素（或主体上的keyup 事件，尽管在这种情况下将其绑定到<form> 可能是最有意义的）元素）。

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