JS代碼同步文本框內(nèi)容的實(shí)例方法
HTML代碼:
<html>
<head>
<script>
//同步函數(shù)
function synchronize(){
document.getElementById('i1').value =document.getElementById('i2').value;
//alert("同步成功");
}
//執(zhí)行同步
setInterval(synchronize,500);//同步的時(shí)間間隔,每0.5秒同步一次
</script>
</head>
<body>
在第二個(gè)輸入框中輸入字符,會(huì)自動(dòng)同步到第一個(gè)輸入框。<br/><br/>
第一個(gè)輸入框:<input type="text" size="45" id="i1" name="first"><br/><br/>
第二個(gè)輸入框:<input type="text" size="45" id="i2" name="second">
</body>
</html>
把上面的HTML代碼保存成html格式文件,用瀏覽器打開,就可以看到效果了。注意:有些瀏覽器為了安全起見,禁止執(zhí)行本地腳本,請(qǐng)點(diǎn)擊“運(yùn)行”即可。
再查找資料的過程中,發(fā)現(xiàn)不僅僅change事件可以處理,其他事件也可以處理。例如:keyup事件等。這里再貼一下另外連個(gè)例子片段:
//這個(gè)不是即時(shí)性的改變
<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" />
//這個(gè)是即時(shí)性的改變,但如果你用鼠標(biāo)標(biāo)操作他不會(huì)檢測(cè)到,所以你可以把這上下兩個(gè)結(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" />
- jQuery實(shí)現(xiàn)文本框輸入同步的方法
- js實(shí)現(xiàn)文本框中輸入文字頁(yè)面中div層同步獲取文本框內(nèi)容的方法
- js中同步與異步處理的方法和區(qū)別總結(jié)
- Extjs ajax同步請(qǐng)求時(shí)post方式參數(shù)發(fā)送方式
- javascript 文件的同步加載與異步加載實(shí)現(xiàn)原理
- JavaScript系列之―同步還是異步?
- javascript同步Import,同步調(diào)用外部js的方法
- node.js中實(shí)現(xiàn)同步操作的3種實(shí)現(xiàn)方法
- js監(jiān)聽表單value的修改同步問題,跨瀏覽器支持
- 同步文本框內(nèi)容JS代碼實(shí)現(xiàn)
相關(guān)文章
JavaScript 實(shí)現(xiàn)的checkbox經(jīng)典實(shí)例分享
本文主要給大家分享的是JavaScript實(shí)現(xiàn)checkbox多項(xiàng)選擇的經(jīng)典代碼,非常的簡(jiǎn)單實(shí)用,有需要的小伙伴可以參考下2016-10-10JS旋轉(zhuǎn)實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)效果
這篇文章主要為大家詳細(xì)介紹了JS旋轉(zhuǎn)實(shí)現(xiàn)轉(zhuǎn)盤抽獎(jiǎng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02JavaScript中reduce()的5個(gè)基本用法示例
這篇文章主要給大家介紹了關(guān)于JavaScript中reduce()的5個(gè)基本用法示例,文中通過示例代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07不用jQuery實(shí)現(xiàn)的動(dòng)畫效果代碼
jQuery 框架用的人越來越多了, 無論是性能還是功能強(qiáng)大都不用多說.2010-11-11js 解析 JSON 數(shù)據(jù)簡(jiǎn)單示例
這篇文章主要介紹了js 解析 JSON 數(shù)據(jù)的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了js 解析 JSON 格式數(shù)據(jù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-04-04uniapp引用echarts的詳細(xì)步驟(附柱狀圖實(shí)例)
最近在uni-app搭建的微信小程序項(xiàng)目中使用了ECharts,下面這篇文章主要給大家介紹了關(guān)于uniapp引用echarts的詳細(xì)步驟,文中還附有柱狀圖實(shí)例,需要的朋友可以參考下2022-07-07Javarscript中模塊(module)、加載(load)與捆綁(bundle)詳解
這篇文章主要給大家介紹了關(guān)于Javarscript中模塊(module)、加載(load)與捆綁(bundle)的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-05-05使用javascript實(shí)現(xiàn)Iframe自適應(yīng)高度
這篇文章主要介紹了使用javascript實(shí)現(xiàn)Iframe自適應(yīng)高度,需要的朋友可以參考下2014-12-12