同步文本框内容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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
Vuex提升学习篇
Jan 11 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
vue-router 控制路由权限的实现
Sep 24 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下载文件的详解
2013/06/02 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
Laravel find in set排序实例
2019/10/09 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
Python常用库推荐
2016/12/04 Python
python:socket传输大文件示例
2017/01/18 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
利用python实现AR教程
2019/11/20 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
轻化专业学生实习自我鉴定
2013/09/20 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
联片教研活动总结
2014/07/01 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2019年大学推荐信
2019/06/24 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫