同步文本框内容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 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
JavaScript 图片预览效果 推荐
Dec 22 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 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
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
js一组验证函数
2008/12/20 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
python处理按钮消息的实例详解
2017/07/11 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Django中Model的使用方法教程
2018/03/07 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
python多任务之协程的使用详解
2019/08/26 Python
Python argparse模块使用方法解析
2020/02/20 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
HTML5的结构和语义(5):内嵌媒体
2008/10/17 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
小学生暑假家长评语
2014/04/17 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
用Python创建简易网站图文教程
2021/06/11 Python
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
Python创建SQL数据库流程逐步讲解
2022/09/23 Python