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

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> JS代碼同步文本框內容的實例方法

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

編輯：JavaScript綜合知識

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

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導出格式化的excel 實例方法
下一頁:JS文本框追加多個下拉框的值的簡單實例

JavaScript綜合知識

IE8中＂HTML Parsing Error:Unable to modify the parent container element before the child: 一、又漲見識了IE8報下面錯誤，而且是我的機器不報，同事的機器報，試了4台，兩個報，兩個
javascript客戶端遍歷控件與獲取父容器對象示例代碼: 本篇文章主要是對javascript客戶端遍歷控件與獲取父容器對象示例代碼進行了介紹，需
JavaScript中Math.SQRT2屬性的使用詳解: 這將返回2的平方根大約是 1.414.語法

DIV CSS 佈局教程網

相關文章