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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
使用Angular CLI生成路由的方法
Mar 24 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 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 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
Python异常处理总结
2014/08/15 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
解决python 找不到module的问题
2020/02/12 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
生日庆典策划方案
2014/06/02 职场文书
英语教师个人总结
2015/02/09 职场文书
催款函怎么写
2015/06/24 职场文书
小学六年级毕业感言
2015/07/30 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
openstack中的rpc远程调用的方法
2021/07/09 Python