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事件，尽管在这种情况下将它绑定到{最有意义。 {1}}元素）。

关于粘贴时的CPU使用情况，您可以尝试取消该事件，除非经过了一定的时间（比如说50毫秒）...希望这就足够了。如果没有，你可以看看一些流行的双向数据绑定框架如何处理这个问题...我见过的大多数使用<form>。

同步相同的html表单

1 个答案: