同步文本框内容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条件判断使用小技巧总结
Sep 08 Javascript
Javascript 函数对象的多重身份
Jun 28 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
js面向对象 多种创建对象方法小结
May 21 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
详解Vue的七种传值方式
Feb 08 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP中session变量的销毁
2014/02/27 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
2013/12/10 Javascript
js style动态设置table高度
2014/10/21 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
在vue中实现点击选择框阻止弹出层消失的方法
2018/09/15 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
numpy数组拼接简单示例
2017/12/15 Python
python生成密码字典的方法
2018/07/06 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
总经理工作职责范文
2014/03/14 职场文书
消防工作实施方案
2014/06/09 职场文书
小学生国庆节演讲稿
2014/09/05 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
获奖感言一句话
2015/07/31 职场文书
教师远程研修感悟
2015/11/18 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
浅谈Python中对象是如何被调用的
2022/04/06 Python