同步相同的html表單

我想在我的網站上有兩個（或更多）相同的html表單。
例如，頁面頂部的一個 - 位於頂部，另一個位於頁面的底部。
我想要的是他們在任何時候都有完全相同的內容。如果用戶在其中一個值中更改了值，則所有其餘值都會更新。
有沒有更好的方法來同步然後javascript onchange/onkeyup事件？
onchange只有元素失去焦點後纔會發射。
onkeyup也不完美。如果元素在onkeydown和onkeyup事件之間失去焦點，它會在長文本複製上浪費很多CPU。同步相同的html表單

來源

2013-02-09 user2052437

你可能會嘗試類似knockoutjs，可能有點太重，因爲只是同步幾個表格 – 2013-02-09 05:17:52

這裏有一個想法...爲什麼不，當一個領域得到專注時，它抓取其他領域的數據，如果在那。如果沒有，它什麼都不做。如果是我，我可能會在模糊事件上做些事情。 – Leeish 2013-02-09 05:17:58

@Leeish它會看起來很粗糙imo – user2052437 2013-02-09 05:36:44

更新：我剛剛瞭解到，HTML5有一個更合適的事件，oninput，但它當然不適用於舊版瀏覽器。 oninput將從右鍵菜單中檢測到任何類型的文本更改，包括Paste，Cut和Delete。因此，最好的選擇可能是檢查瀏覽器是否支持oninput（例如，通過使用推薦的here功能），如果不支持，則回到下面的方法。在舊版本的IE上，onpropertychange可用於模擬oninput。

我決定改變我的答案，根據KnockoutJS如何完成這個。從this page在淘汰賽文檔：

「afterkeydown」 - 只要用戶開始輸入一個字符更新您的視圖模型。這可以通過捕獲瀏覽器的keydown事件並異步處理事件來工作。

在這些選項中，「afterkeydown」是最好的選擇，如果你想保持你的視圖模型實時更新。

它通過使用setTimeout的時間值爲零來完成異步行爲。除此之外，它看起來就像是一個常規的事件處理程序。

這裏有一個簡單的例子，使用jQuery，我相信等價的行爲，以淘汰賽的「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); 
});

像，paste和drop還需要setTimeout爲了與最新的值更新的文字。

原來的答覆：

onkeyup可能是要走的路，但你養好點吧，如果元素失去的keydown和KEYUP之間集中不點火。基於this answer，我非常確定解決方案是聽一個容器元素上的按鍵事件（或者在主體上，儘管在這種情況下最好將它綁定到<form>元素上）。

至於粘貼上的CPU使用情況，您可以嘗試取消事件，除非已經過了一定的時間（比如說50毫秒）......希望這樣就足夠了。如果沒有，你可以看看一些流行的雙向數據綁定框架如何處理這個......我見過的大多數使用onkeyup。

來源

2013-02-09 05:58:29

對於那些有興趣的人來說，這是knockout.js中的相關源文件：https://github.com/SteveSanderson/knockout/blob/master/src/binding/defaultBindings/value.js（搜索「keydown」）。 – 2013-02-09 06:52:41

這種方法仍然不是很快，但我不認爲有可能在不使用JavaScript缺少的指針的情況下加速它。否則，這工作正常，謝謝。 – user2052437 2013-02-09 07:07:24

對於我來說，「afterkeydown」方法似乎比聽取關鍵幀和模糊（模糊而不是變化，因爲在你描述的關鍵問題之前失去了焦點）......我猜測如果還有其他東西，這可能不是真的然而，在後臺進行。這些實際上是讓JavaScript立即響應文本更改的唯一方法。 – 2013-02-09 14:49:27

同步相同的html表單

回答

相關問題