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写的一个链表实现代码
Oct 25 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
浅谈node.js中async异步编程
Oct 22 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
JS继承最简单的理解方式
Mar 31 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
php时间计算相关问题小结
2016/05/09 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
vue实现简单计算商品价格
2020/09/14 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
高效使用Python字典的清单
2018/04/04 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
HTML5各种头部meta标签的功能(推荐)
2017/03/13 HTML / CSS
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
英文简历中的自我评价
2013/10/06 职场文书
程序员求职信
2014/04/16 职场文书
影子教师研修方案
2014/06/14 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
股权转让协议范本
2014/12/07 职场文书
起诉书范文
2015/05/20 职场文书
2015年财政局工作总结
2015/05/21 职场文书
vue 给数组添加新对象并赋值
2022/04/20 Vue.js