同步文本框内容JS代码实现


Posted in Javascript onAugust 04, 2016

本文实例为大家分享了同步文本框内容JS代码,供大家参考,具体内容如下

图例1 

同步文本框内容JS代码实现

<html>
<body>
<script language="JavaScript" type="text/javascript">
  function addEvent(eventHandler)
  {
    var tags = document.getElementsByTagName('input');
    for(var i=0;i<tags.length;i++)
    {
      if(tags[i].getAttribute('url') == 'true')
      {
        if(tags[i].addEventListener)
        {
          tags[i].addEventListener('keyup',eventHandler,true);
        }
        else
        {
          tags[i].attachEvent('onkeyup',eventHandler);
        }
      }
    }
  }
  function addInput(e)
  {
    var obj = e.target ? e.target : e.srcElement;
    var tags = document.getElementsByTagName('input');
    for(var i=0;i<tags.length;i++)
    {
      if(tags[i].getAttribute('url') == 'true'&&tags[i]!=obj)
      {
        tags[i].value = obj.value;
      }
    }
  }
  window.onload = function()
  {
    addEvent(addInput);
  }
</script>

<p>
 <input id="addr_more1" size="35" value="" name="addr_more1" url="true" />
</p>
<p>
 <input id="addr_more2" size="35" value="" name="addr_more2" url="true" />
</p>
<p>
 <input id="addr_more3" size="35" value="" name="addr_more3" url="true" />
</p>
<p>
 <input id="addr_more4" size="35" value="" name="addr_more4" url="true" />
</p>

</body>
</html>

图例2 

同步文本框内容JS代码实现

<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
  <script type="text/javascript">
  function getNM(id)
    {
      var name2 = $("#"+id+"").val();
      if (name2 != "") {
      for(var i=3;i<6;i++)
        $("#NM"+i+"").val(name2);
      }
    }
  </script>
</head>
<body>
  <input type="text" id="NM1" value="" />
  <input type="text" id="NM2" value="" />
  <input type="text" id="NM3" value="" onkeyup="getNM(this.id)"/>
  <input type="text" id="NM4" value="" onkeyup="getNM(this.id)"/>
  <input type="text" id="NM5" value="" onkeyup="getNM(this.id)"/>
</body>
</html>

需要引用 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
详解webpack 入门与解析
Apr 09 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
JS打印组合功能
Aug 04 #Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 #Javascript
jQuery选择器总结之常用元素查找方法
Aug 04 #Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 #Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 #Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 #Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 #Javascript
You might like
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
2015/09/19 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
python实现百万答题自动百度搜索答案
2018/01/16 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
Tensorflow 实现释放内存
2020/02/03 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
python中rc1什么意思
2020/06/19 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
什么是makefile? 如何编写makefile?
2012/08/08 面试题
平面设计岗位职责
2013/12/14 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
民事诉讼代理词
2015/05/25 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
教师学期述职自我鉴定
2019/08/16 职场文书
PyTorch device与cuda.device用法
2022/04/03 Python
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js