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针对DOM的应用分析(二)
Apr 15 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
判断日期是否能跨月查询的js代码
Jul 25 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
js对象的复制继承实例
Jan 10 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
vue+Element-ui实现登录注册表单
Nov 17 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网页病毒清除类
2014/12/08 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
JavaScript中SQL语句的应用实现
2010/05/04 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
Angular 作用域scope的具体使用
2017/12/11 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
python 判断自定义对象类型
2009/03/21 Python
python根据京东商品url获取产品价格
2015/08/09 Python
python http接口自动化脚本详解
2018/01/02 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Python 限定函数参数的类型及默认值方式
2019/12/24 Python
Python while循环使用else语句代码实例
2020/02/07 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
应届毕业生个人求职信范文
2014/01/29 职场文书
业务部门经理岗位职责
2014/02/23 职场文书
2015年工商所工作总结
2015/05/21 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server