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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
23个Javascript弹出窗口特效整理
Feb 25 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
vue中使用echarts制作圆环图的实例代码
Jul 27 Javascript
150行Node.js实现的dns代理工具
Aug 02 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
Node.js API详解之 zlib模块用法分析
May 19 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 版本]
2007/03/20 PHP
PHP extract 将数组拆分成多个变量的函数
2010/06/30 PHP
php绘制一条弧线的方法
2015/01/24 PHP
关于PHP开发的9条建议
2015/07/27 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
基于python编写的微博应用
2014/10/17 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python读写文件write和flush的实现方式
2020/02/21 Python
python脚本和网页有何区别
2020/07/02 Python
Python pymsql模块的使用
2020/09/07 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
公司市场部岗位职责
2013/12/02 职场文书
学校万圣节活动方案
2014/02/13 职场文书
班级旅游计划书
2014/05/03 职场文书
学校运动会霸气口号
2014/06/07 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
python解析照片拍摄时间进行图片整理
2022/07/23 Python