下面是我的问题的html代码，我需要将一个文本框的内容复制到另一个具有相似ID的onblur或onkeyup。请帮助我。 javascript 函数“sync”应该针对我的问题进行更新。提前致谢。
<html>
</head>
<body>
<div id="container">
<script type="text/javascript">
function sync(order){
var val, i, val1;
val = document.getElementsByTagName('input');
alert(val.length);
for (i=0;i<val.length;i++){
if(val[i].getAttribute('id')==order){
val1 = document.getElementById(order).value;
if(val1 != '')
break;
}
}
}
</script>
<div id="body">
<div id="wrapper">
<form id="assignship" name="assignship" action="/drivewise-dst/assignship" method="post">
<table class="wwFormTable">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10" colspan="3" class="titlebar"
style="background-repeat: no-repeat; align: right"> </td>
</tr>
<tr>
<td colspan="3">
<table width="1011" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="17"> </td>
<td width="10" bgcolor="#CCCCCC" class="header"> </td>
<td width="110" bgcolor="#CCCCCC" class="header">Export To Excel</td>
<td width="130" bgcolor="#CCCCCC" class="header">Order #</td>
<td width="175" bgcolor="#CCCCCC" class="header">First Name</td>
<td width="205" bgcolor="#CCCCCC" class="header">Last Name</td>
<td width="142" bgcolor="#CCCCCC" class="header">Tracking #</td>
<td width="115" bgcolor="#CCCCCC" class="header">Serial #</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td>
<div
style="width: 993px; height: 350px; overflow: auto; overflow-x: hidden; background-color: #f9f5e3;">
<table width="1024" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="7">
<div align="center"></div>
</td>
</tr>
<tr>
<td width="114">
<div align="center"><input name="Export7" type="checkbox"
id="Export7" onclick="javascript:checkedAll();" /></div>
</td>
<td width="105"> </td>
<td width="175"> </td>
<td width="175"> </td>
<td width="142"> </td>
<td width="142"> </td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="0"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1067</td>
<td width="175" class="chartcopy">ELEPHANT</td>
<td width="175" class="chartcopy">FOX</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="1"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1067</td>
<td width="175" class="chartcopy">ELEPHANT</td>
<td width="175" class="chartcopy">FOX</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="2"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1067</td>
<td width="175" class="chartcopy">ELEPHANT</td>
<td width="175" class="chartcopy">FOX</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1067" onblur="javascript:sync('1067')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="3"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">1085</td>
<td width="175" class="chartcopy">CAT</td>
<td width="175" class="chartcopy">DOG</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="1085" onblur="javascript:sync('1085')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="4"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3333</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3333" onblur="javascript:sync('3333')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="5"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3333</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3333" onblur="javascript:sync('3333')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="6"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3334</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3334" onblur="javascript:sync('3334')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
<input type="hidden" name="vinHidden" value="VIN" id="assignship_vinHidden"/>
<tr>
<td width="114" align="center"><input
value="7"
type=checkbox name="chkbox" id="chkbox"></input></td>
<td width="105" class="chartcopy">3335</td>
<td width="175" class="chartcopy">APPLE</td>
<td width="175" class="chartcopy">BOY</td>
<td width="142"><input type="text" name="trackingNumber" size="15" maxlength="50" value="" id="3335" onblur="javascript:sync('3335')"/></td>
<td width="160">
<div class="action-error"></div>
<input type="text" name="serial" size="15" maxlength="10" value="" id="serial"/>
</td>
</tr>
</table>
</div>
</td>
<td> </td>
</tr>
<tr>
<td colspan="3">
<table width="1011" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="43" bgcolor="#FFFFFF"> </td>
</td>
<td width="157" bgcolor="#FFFFFF"><input type="button" alt="" id="xxx" name="xxx" value="submit"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table></form>
</div>
</div>
</div>
</body>
</html>
最佳答案
您的主要问题是您的所有 <input>元素具有相同的 id“1067”。这不仅不符合 XHTML 标准，而且还会导致您的 javascript 出现问题，如 document.getElementById(order)将返回多个元素，此函数无法处理这种情况。
我建议将类(class)应用于所有 <input>元素，使用 jQuery 绑定(bind) .blur()事件到该类的每个元素，并以这种方式执行逻辑(使用 jQuery 的 foreach 枚举器而不是具有 id 匹配的 for 循环)。
当然，您也可以使用常规 JavaScript 来完成此操作(正如您所做的那样，在实际元素上内联“onblur”事件连接)。
但首先，修复 HTML，以便它可以与 JavaScript 很好地配合。
关于javascript - 在 JavaScript 中将具有相同 ID 的一个文本框的值复制到另一个文本框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3705116/