首頁 > 開發者 > JavaScript
HTML代碼：
複製代碼 代碼如下:
<html>
<head>
<script>
//同步函數
function synchronize(){
document.getElementById('i1').value =document.getElementById('i2').value;
//alert("同步成功");
}
//執行同步
setInterval(synchronize,500);//同步的時間間隔，每0.5秒同步一次
</script>
</head>
<body>
在第二個輸入框中輸入字元，會自動同步到第一個輸入框。<br/><br/>
第一個輸入框：<input type="text" size="45" id="i1" name="first"><br/><br/>
第二個輸入框：<input type="text" size="45" id="i2" name="second">
</body>
</html>
把上面的HTML代碼儲存成html格式檔案，用瀏覽器開啟，就可以看到效果了。注意：有些瀏覽器為了安全起見，禁止執行本地指令碼，請點擊“運行”即可。
再尋找資料的過程中，發現不僅僅change事件可以處理，其他事件也可以處理。例如：keyup事件等。這裡再貼一下另外連個例子片段：
複製代碼 代碼如下:
//這個不是即時性的改變
<input type="text" id="t1" value="" size="45" onchange="document.getElementById('t2').value=this.value" />
<input type="text" id="t2" value="" size="45" onchange="document.getElementById('t1').value=this.value" />
//這個是即時性的改變,但如果你用滑鼠標操作他不會檢測到,所以你可以把這上下兩個結合下.
<input type="text" id="t3" value="" size="45" onkeyup="document.getElementById('t4').value=this.value" />
<input type="text" id="t4" value="" size="45" onkeyup="document.getElementById('t3').value=this.value" />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
