我想在我的网站上有两个(或更多)相同的 html 表单。
例如，一个位于页面顶部，另一个位于页面底部。
我想要的是让他们在任何给定时间都拥有完全相同的内容。如果用户更改其中一个值，则所有其余值都会更新。
有没有更好的方法来同步 javascript onchange/onkeyup 事件？
onchange 仅在元素失去焦点后触发。
onkeyup 也不完美。它会在长文本复制上浪费大量 CPU，如果元素在 onkeydown 和 onkeyup 事件之间失去焦点，它也不会触发。
最佳答案
更新:我刚刚了解到 HTML5 对此有一个更合适的事件，oninput , 但当然它在旧浏览器中不起作用。 oninput将检测任何类型的文本更改，包括 Paste , Cut , 和 Delete从右键单击菜单。所以最好的选择可能是检查浏览器是否支持 oninput (例如，通过使用推荐的函数 here )，如果不是，则返回到下面的方法。在旧版本的 IE 上，onpropertychange可以用来模拟oninput .
我决定根据 KnockoutJS 的实现方式更改我的答案。来自 this page在 Knockout 文档中:
"afterkeydown" - updates your view model as soon as the user begins typing a character. This works by catching the browser’s keydown event and handling the event asynchronously.
Of these options, "afterkeydown" is the best choice if you want to keep your view model updated in real-time.
它通过使用 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 事件，尽管在这种情况下将它绑定(bind)到 <form> 元素可能最有意义)。
至于粘贴时的 CPU 使用率，您可以尝试取消该事件，除非经过了一定的时间(比如 50 毫秒)...希望这就足够了。如果没有，您可以看看一些流行的双向数据绑定(bind)框架是如何处理这个问题的……我见过的大多数框架都使用 onkeyup .
关于javascript - 同步相同的html表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14785212/