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 prototype属性使用说明
May 13 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JavaScript 数组详解
Oct 10 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
JS简单编号生成器实现方法(附demo源码下载)
Apr 05 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
npm 语义版本控制详解
Sep 10 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
python k-近邻算法实例分享
2014/06/11 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
python3实现磁盘空间监控
2018/06/21 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
Pycharm Git 设置方法
2020/09/15 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
html5中JavaScript removeChild 删除所有节点
2014/05/16 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
农场厂长岗位职责
2013/12/28 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
好邻里事迹材料
2014/01/16 职场文书
大型车展策划方案
2014/02/01 职场文书
运动会邀请函范文
2014/02/06 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
小学母亲节活动总结
2015/02/10 职场文书
晚会开幕词范文
2016/03/04 职场文书