JS代碼同步文本框內容的實例方法

2019-11-20 22:32:01

字體：大中小

來源：轉載

供稿：網友

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" /> 

上一篇：JS文本框追加多個下拉框的值的簡單實例

下一篇：jquery 獲取標簽名(tagName)示例代碼