JavaScript实现文本框内容同步的两种方法
作者：函数茶馆时间：2026-10-30 11:45:56浏览：382
本文介绍了两种在JavaScript中实现多个文本框内容同步的方法。第一种通过原生DOM操作监听keyup事件，适用于支持addEventListener的浏览器；第二种利用jQuery库，通过绑定onkeyup事件触发函数，将输入值同步至其他指定ID的文本框。代码示例展示了具体实现逻辑及HTML结构，供开发者参考使用。
JavaScript实现文本框内容同步的两种方法
本文分享了一段用于同步文本框内容的JavaScript代码示例，供读者参考。
图例1
原生JavaScript实现同步
<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
基于jQuery的同步实现
<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>
使用第二种方法前，需要引入jquery-1.4.4.min.js脚本文件。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
作者最新文章
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数？
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑？
2026-11-05 14:01:09