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 相关文章推荐
(function(){})()的用法与优点
Mar 11 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
整理一下常见的IE错误
Nov 18 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
Parcel 打包示例(React HelloWorld)
Jan 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产生动态的影像图
2006/10/09 PHP
php zip文件解压类代码
2009/12/02 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
禁用页面部分JavaScript不是全部而是部分
2014/09/03 Javascript
Angularjs 基础入门
2014/12/26 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
Python itertools模块详解
2015/05/09 Python
深入理解Python3 内置函数大全
2017/11/23 Python
Python中函数参数调用方式分析
2018/08/09 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
天网面试题
2013/04/07 面试题
班主任2015新年寄语
2014/12/08 职场文书
2015年端午节活动总结
2015/02/11 职场文书
入党培养人考察意见
2015/06/08 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
java版 简单三子棋游戏
2022/05/04 Java/Android
基于Python实现nc批量转tif格式
2022/08/14 Python