同步文本框内容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 相关文章推荐
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
js日期时间补零的小例子
Mar 05 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
Jan 26 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
node.js中的url.format方法使用说明
Dec 10 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
vue路由嵌套的SPA实现步骤
Nov 06 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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新建文件自动编号的思路与实现
2011/06/27 PHP
PHP安全性漫谈
2012/06/28 PHP
PHP常用技巧汇总
2016/03/04 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python如何存储数据到json文件
2020/03/09 Python
python如何进行矩阵运算
2020/06/05 Python
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
Java中实现多态的机制是什么?
2014/12/07 面试题
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
师范大学生求职信
2014/06/13 职场文书
经济类毕业生求职信
2014/06/26 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书