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封装DOMContentLoaded事件实例
Jun 12 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 Javascript
vue观察模式浅析
Sep 25 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 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
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php实现的短网址算法分享
2014/06/20 PHP
php+xml实现在线英文词典之添加词条的方法
2015/01/23 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
2016/10/13 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
python控制台中实现进度条功能
2015/11/10 Python
基于Django用户认证系统详解
2018/02/21 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python实现ID3决策树算法
2018/08/29 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python中的X[:,0]、X[:,1]、X[:,:,0]、X[:,:,1]、X[:,m:n]和X[:,:,m:n]
2020/02/13 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS