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 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
DIV菜单层实现代码
Nov 19 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
解决vue自定义全局消息框组件问题
Nov 22 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
留言板翻页的实现详解
2006/10/09 PHP
2款PHP无限级分类实例代码
2015/11/11 PHP
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python实现Adapter模式实例代码
2018/02/09 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python assert语句的简单使用示例
2019/07/28 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
浅谈Python中的继承
2020/06/19 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
高级3D打印市场:Gambody
2019/12/26 全球购物
为什么会有内存对齐
2016/10/10 面试题
opencv实现图像平移效果
2021/03/24 Python
银行实习自我鉴定
2013/10/12 职场文书
清洁工岗位职责
2014/01/29 职场文书
保密承诺书范文
2014/03/27 职场文书
护士求职信
2014/07/05 职场文书
企业党员个人自我评价
2014/09/20 职场文书
工作收入证明模板
2015/06/12 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python