兩個文字框同步輸入內容程式碼例項
有時候需要在兩個文字框同步輸入的內容,也就是當在一個文字框輸入內容的時候,另一個文字也會同步跟隨填充,這種效果在很多網站都有應用,最典型的就是站長工具,下面就來介紹一下如何使用jQuery實現此效果。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> var fun=function(){ value=$(this).val(); $('#bottom').val(value); } $(document).ready(function(){ $('#top').bind('keyup',fun); }) </script> </head> <body> <input type="text" id="top"><br/> <input type="text" id="bottom"> </body> </html>
以上程式碼可以實現我們的要求,當在第一個文字框中輸入內容的時候,第二個文字框可以跟隨輸入,程式碼非常的簡單,主要是利用了keyup事件,具體可以參閱jQuery keyup事件一章節。
相關文章
- 實現文字框輸入內容提示程式碼例項
- 文字框內容輸入完畢觸發事件程式碼例項事件
- 文字框輸入內容實現智慧提示效果程式碼例項
- 實現多個文字框輸入同步效果程式碼例項
- JavaScript 文字框輸入內容同步JavaScript
- jQuery文字框輸入內容同步jQuery
- js多個文字框輸入內容同步效果JS
- jQuery文字框內容輸入同步功能jQuery
- 在文字框輸入關鍵字會彈出內容提示程式碼例項
- jQuery點選文字框清除內容程式碼例項jQuery
- javascript限制textarea文字框輸入字元個數程式碼例項JavaScript字元
- 限定文字框只能輸入數字例項程式碼
- 文字框輸入數字倒計例項程式碼
- jquery監聽文字框內容變化程式碼例項jQuery
- 文字框輸入完成自動跳入下一個程式碼例項
- 實時監聽文字框內容變化程式碼例項
- 限制文字框只能夠輸入數字程式碼例項
- textarea文字框輸入文字數目倒計效果程式碼例項
- 規定文字框只能夠輸入整數程式碼例項
- 如何設定文字框只能夠輸入數字程式碼例項
- js刪除文字框輸入內容前後兩端的空格JS
- js實現的文字框輸入內容自動提示效果程式碼JS
- 密碼框輸入提示效果程式碼例項密碼
- 文字嵌入邊框程式碼例項
- 密碼框提示文字程式碼例項密碼
- JavaScript讀取文字檔案內容程式碼例項JavaScript
- 在文字框輸入關鍵詞可以實現篩選功能程式碼例項
- 文字框與文字垂直對齊程式碼例項
- javascript驗證輸入文字框內容是否為數字JavaScript
- JavaScript 驗證輸入文字框內容是否為數字JavaScript
- 文字框只能輸入數字程式碼
- 文字框點選清除預設文字例項程式碼
- 讓input文字框文字垂直居中程式碼例項
- 密碼框提示文字效果程式碼例項密碼
- 獲取網頁中的密碼和文字輸入框的內容 (轉)網頁密碼
- 當前文字框高亮效果程式碼例項
- 文字框高度自適應例項程式碼
- js動態建立文字框程式碼例項JS