同步文本框内容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 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
Js组件的一些写法
Sep 10 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
ant design实现圈选功能
Dec 17 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
jQuery实现朋友圈查看图片
Sep 11 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
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php图片上传类 附调用方法
2016/05/15 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
JavaScript XML实现两级级联下拉列表
2008/11/10 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
python打开windows应用程序的实例
2019/06/28 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
德国帽子专家:Hutshopping
2019/11/03 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
C++面试题目
2013/06/25 面试题
机械电子工程专业求职信
2014/06/22 职场文书
学习保证书怎么写
2015/02/26 职场文书
行政复议决定书
2015/06/24 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
详解SQL的窗口函数
2022/04/21 Oracle
Nginx如何配置根据路径转发详解
2022/07/23 Servers