jQuery文字框輸入內容同步

admin發表於2017-03-19
jQuery

分享一段程式碼例項，它實現了兩個文字框內容輸入同步效果。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#top").keyup(function(){
    $("#bottom").val(this.value)
  }) 
}); 
</script>
</head> 
<body> 
螞蟻部落一:<input type="text" id="top"/><br/>
螞蟻部落二:<input type="text" id="bottom"/>
</body> 
</html>

程式碼比較簡單，下面對實現原理做一下簡單介紹。

實現原理:

為第一個文字框註冊keyup事件處理函式。

當用鍵盤輸入內容，按鍵鬆開的時候能夠獲取此文字框當前的value屬性值，並將其寫入到第二個文字框中。

關於keyup事件可以參閱jQuery keyup 事件一章節。

相關文章