同步文本框内容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的图片的切换(以数字的形式)
Feb 14 Javascript
window.navigate 与 window.location.href 的使用区别介绍
Sep 21 Javascript
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
javascript实现2048游戏示例
May 04 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
小程序实现按下录音松开识别语音
Nov 22 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
jquery插件实现图片悬浮
Apr 16 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设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
浅析php学习的路线图
2013/07/10 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
介绍Python中的fabs()方法的使用
2015/05/14 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
python绘制热力图heatmap
2020/03/23 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
美国精油公司:Plant Therapy
2019/05/17 全球购物
党员公开承诺书内容
2014/05/20 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏