2013-02-09 49 views
1

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

+0

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

+0

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

+0

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

回答

2

更新:我剛剛瞭解到,HTML5有一個更合適的事件,oninput,但它當然不適用於舊版瀏覽器。 oninput將從右鍵菜單中檢測到任何類型的文本更改,包括PasteCutDelete。因此,最好的選擇可能是檢查瀏覽器是否支持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); 
}); 

像​​,pastedrop還需要setTimeout爲了與最新的值更新的文字。

原來的答覆:

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

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

+0

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

+0

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

+0

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