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 相关文章推荐
JavaScript面象对象设计
Apr 28 Javascript
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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新手上路(三)
2006/10/09 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
浅析Node.js:DNS模块的使用
2016/11/23 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
Python处理字符串之isspace()方法的使用
2015/05/19 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
Python读取properties配置文件操作示例
2018/03/29 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
大学生创业计划书的范文
2014/01/07 职场文书
同事打架检讨书
2014/02/04 职场文书
给老师的检讨书
2014/02/11 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
离婚协议书范文2016
2016/03/18 职场文书
导游经典开场白——导游词
2019/04/17 职场文书