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 相关文章推荐
jQuery对象[0]是什么含义?
Jul 31 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
layer iframe 设置关闭按钮的方法
Sep 12 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 Javascript
vue 页面跳转的实现方式
Jan 12 Vue.js
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下MAIL的另一解决方案
2006/10/09 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
2015/03/23 Javascript
jQuery EasyUi实战教程之布局篇
2016/01/26 Javascript
javascript基础知识
2016/06/07 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
python str与repr的区别
2013/03/23 Python
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
利用nohup来开启python文件的方法
2019/01/14 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
python代码实现猜拳小游戏
2020/11/30 Python
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
公司募捐倡议书
2014/05/14 职场文书
药品营销策划方案
2014/06/15 职场文书
面试自我评价范文
2014/09/17 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
迎新生欢迎词
2015/01/23 职场文书
体育教师个人工作总结
2015/02/09 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS