JS代码同步文本框内容的实例方法


Posted in Javascript onJuly 12, 2013

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" />
Javascript 相关文章推荐
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
Jquery中CSS选择器用法分析
Feb 10 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
Jul 03 Javascript
实例分析js事件循环机制
Dec 13 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
详解JavaScript原型与原型链
Nov 16 Javascript
jquery 获取标签名(tagName)示例代码
Jul 11 #Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 #Javascript
js动态生成指定行数的表格
Jul 11 #Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 #Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 #Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 #Javascript
在js文件中如何获取basePath处理js路径问题
Jul 10 #Javascript
You might like
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
$()JS小技巧
2007/07/21 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
jquery插件jquery.confirm弹出确认消息
2015/12/22 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
[01:10:24]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第一场 2月28日
2021/03/11 DOTA
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
python 计算文件的md5值实例
2017/01/13 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
python实现超级玛丽游戏
2020/03/18 Python
Django设置Postgresql的操作
2020/05/14 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
资金主管岗位职责范本
2014/03/04 职场文书
公安学专业求职信
2014/07/27 职场文书
六一儿童节标语
2014/10/08 职场文书
五四青年节活动总结
2015/02/10 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
机械生产实习心得体会
2016/01/22 职场文书
2019个人工作总结
2019/06/21 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
css3新特性的应用示例分析
2022/03/16 HTML / CSS