同步文本框内容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中sort()方法的用法
Nov 04 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
jQuery实现带渐显效果的人物多级关系图代码
Oct 16 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
WEB前端实现裁剪上传图片功能
Oct 17 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
vue组件开发props验证的实现
Feb 12 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
Vue watch响应数据实现方法解析
Jul 10 Javascript
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桌面中心(四) 数据显示
2007/03/11 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
Laravel 5.4前后台分离,通过不同的二级域名访问方法
2019/10/13 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Python遍历指定文件及文件夹的方法
2015/05/09 Python
python中plot实现即时数据动态显示方法
2018/06/22 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Python多线程正确用法实例解析
2020/05/30 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
教师档案管理制度
2014/01/23 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
婚宴邀请函
2015/01/30 职场文书
公司门卫岗位职责
2015/04/13 职场文书
春风化雨观后感
2015/06/11 职场文书
贫困证明书范文
2015/06/16 职场文书