快捷導(dǎo)航

JS代碼同步文本框內(nèi)容的實例方法

更新時間：2013年07月12日 11:37:32 作者：

這篇文章介紹了JS代碼同步文本框內(nèi)容的方法，有需要的朋友可以參考一下

HTML代碼：

<html> 
   <head> 
     <script> 
      //同步函數(shù) 
      function synchronize(){ 
        document.getElementById('i1').value =document.getElementById('i2').value; 
        //alert("同步成功"); 
     } 
      //執(zhí)行同步 
      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格式文件，用瀏覽器打開，就可以看到效果了。注意：有些瀏覽器為了安全起見，禁止執(zhí)行本地腳本，請點擊“運行”即可。
再查找資料的過程中，發(fā)現(xiàn)不僅僅change事件可以處理，其他事件也可以處理。例如：keyup事件等。這里再貼一下另外連個例子片段：

復(fù)制代碼代碼如下:

//這個不是即時性的改變 
<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" /> 
//這個是即時性的改變,但如果你用鼠標標操作他不會檢測到,所以你可以把這上下兩個結(jié)合下. 
<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" /> 

您可能感興趣的文章:

相關(guān)文章

JavaScript防抖與節(jié)流詳解
這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過文字說明加示例代碼的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2021-10-10
一個JavaScript處理textarea中的字符成每一行實例
這篇文章主要與大家分享一個JavaScript處理textarea中的字符成每一行實例，很簡單，但很實用，大家可以看看
2014-09-09
基于JavaScript實現(xiàn)省市聯(lián)動效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)省市聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
javascript DOM實用學(xué)習(xí)資料
比較詳細的實例分析了dom的一些常用方法
2008-09-09
Javascript下拉刷新的簡單實現(xiàn)
這篇文章主要為大家詳細介紹了Javascript下拉刷新的簡單實現(xiàn)過程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
js本身的局限性別讓javascript做太多事
最近常有人在Q群里發(fā)問諸如"怎樣讓js操作文件"、"怎樣讓js實現(xiàn)多線程"等問題。
2010-03-03
JavaScript實現(xiàn)左右滾動電影畫布
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)左右滾動電影畫布，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-02-02
JavaScript中reduce()的5個基本用法示例
這篇文章主要給大家介紹了關(guān)于JavaScript中reduce()的5個基本用法示例，文中通過示例代碼以及圖文介紹的非常詳細，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
JavaScript原生對象之Number對象的屬性和方法詳解
這篇文章主要介紹了JavaScript原生對象之Number對象的屬性和方法詳解,本文講解了創(chuàng)建 Number 對象的語法、MAX_VALUE、MIN_VALUE、NaN等屬性或方法,需要的朋友可以參考下
2015-03-03
javascript實現(xiàn)拼圖游戲
這篇文章主要為大家詳細介紹了javascript實現(xiàn)拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01