同步文本框内容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设计模式之解释器模式详解
Jun 05 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
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脚本的10个技巧(2)
2006/10/09 PHP
php通用防注入程序 推荐
2011/02/26 PHP
JQuery 入门实例1
2009/06/25 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
如何通过setTimeout理解JS运行机制详解
2019/03/23 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python计算程序运行时间的方法
2014/12/13 Python
python字符串对其居中显示的方法
2015/07/11 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
C#笔试题
2015/07/14 面试题
学生爱国演讲稿
2014/01/14 职场文书
超市中秋节促销方案
2014/03/21 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
法人授权委托书
2014/09/16 职场文书
高中生旷课检讨书
2014/10/08 职场文书
小平小道观后感
2015/06/09 职场文书
情感电台广播稿
2015/08/18 职场文书
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python