我想在我的網站上有兩個(或更多)相同的html表單。
例如,頁面頂部的一個 - 位於頂部,另一個位於頁面的底部。
我想要的是他們在任何時候都有完全相同的內容。如果用戶在其中一個值中更改了值,則所有其餘值都會更新。
有沒有更好的方法來同步然後javascript onchange
/onkeyup
事件?
onchange
只有元素失去焦點後纔會發射。
onkeyup
也不完美。如果元素在onkeydown
和onkeyup
事件之間失去焦點,它會在長文本複製上浪費很多CPU。同步相同的html表單
回答
更新:我剛剛瞭解到,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
。
對於那些有興趣的人來說,這是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
- 1. 同步相對錶中的同步框架2.1
- 2. 同步同步列表
- 3. 同步表單向不同方向的不同表格
- 4. 單鏈表插入同步
- 5. 同步報表和單獨的非同步方法
- 6. 表單提交同步還是異步?
- 7. 使用php同步在單獨的數據庫中的相同表格
- 8. 同步語句 - 同步方法和同步語句是否相同?
- 9. Redux表單 - 在同一表單中同步並提交驗證
- 10. 與HTML表格同步對象
- 11. 與MS Sync框架同步相關表
- 12. 相同的CSS/HTML不同的結果?
- 13. 大小相同的HTML表列
- 14. 數據表HTML例子是相同的
- 15. 雙向同步與PT-表同步
- 16. MySQL表同步
- 17. mysql表同步
- 18. 異步代碼+ Async.RunSynchronously相對於單純的同步碼
- 19. 相同佈局不同的內容html
- 20. 與URL查詢字符串同步HTML表單?
- 21. 使用Ajax同步請求驗證html表單
- 22. 列表是相同的但不相同?
- 23. 如何讓jQuery執行與html表單相同的操作
- 24. 訪問HTML表單元素具有相同名稱的JavaScript
- 25. 區分具有相同名稱的HTML表單SELECT項目
- 26. HTML表單多個相同的值輸入
- 27. HTML/CSS:跨行的表格單元格寬度相同
- 28. 具有相同URL的其餘類型,JSON或HTML表單
- 29. 同步兩個HTML元素
- 30. 同步加載HTML模板
你可能會嘗試類似knockoutjs,可能有點太重,因爲只是同步幾個表格 – 2013-02-09 05:17:52
這裏有一個想法...爲什麼不,當一個領域得到專注時,它抓取其他領域的數據,如果在那。如果沒有,它什麼都不做。如果是我,我可能會在模糊事件上做些事情。 – Leeish 2013-02-09 05:17:58
@Leeish它會看起來很粗糙imo – user2052437 2013-02-09 05:36:44