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 建设银行登陆键盘
Jun 10 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
Apr 15 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
2016/09/16 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
canvas时钟效果
2017/02/16 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
教你用一行Python代码实现并行任务(附代码)
2018/02/02 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
护士自我鉴定
2013/10/23 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
法律进企业活动方案
2014/03/04 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Mysql基础知识点汇总
2021/05/26 MySQL