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 globalStorage类代码
Jun 04 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
jQuery Validate插件实现表单验证
Aug 19 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
Jul 18 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 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
Symfony页面的基本创建实例详解
2015/01/26 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
2016/06/07 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
用python 制作图片转pdf工具
2015/01/30 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python numpy 一维数组转变为多维数组的实例
2018/07/02 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python3 读取Word文件方式
2020/02/13 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
国税会议欢迎词
2014/01/16 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS