JQuery不能从一个输入复制到另一个输入

JQuery Can't Copy From 1 Input to another

本文关键字：输入 一个 复制 另一个 不能 JQuery      更新时间：2023-09-26

尝试使用jQuery从<input>字段值复制一个值到另一个值。

这在JSFiddle中工作，但当我在本地服务器上尝试它时不工作。

我做错了什么?

https://jsfiddle.net/1emrxsLw/

JS: 

$('#do').click(function() {
   $('#three').val($('#one').val());
});
$('#four').keyup(function() {
   $('#six').val($('#four').val());
});
$('#seven').blur(function() {
  $('#nine').val($('#seven').val());
});

完整HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<title>Untitled 1</title>
</head>
<body>
<h1>Button Click</h1>
<form id="form1">
  <input id='one' type='text' />
  <input id='two' type='text' />
</form>
<form id="form2">
  <input id='three' type='text' />
</form>
<input type='button' id="do" value="Copy" />
<h1>Insta-Copy(TM)</h1>
<form id="form1">
  <input id='four' type='text' />
  <input id='five' type='text' />
</form>
<form id="form2">
  <input id='six' type='text' />
</form>

<h1>On Blur</h1>
<form id="form1">
  <input id='seven' type='text' />
  <input id='eight' type='text' />
</form>
<form id="form2">
  <input id='nine' type='text' />
</form>
</body>
<script type="text/javascript">
$('#do').click(function() {
  $('#pDate1').val($('#fdatea').val());
});
$('#four').keyup(function() {
  $('#six').val($('#four').val());
});
$('#seven').blur(function() {
  $('#nine').val($('#seven').val());
});
</script>
</html>

首先，HTML页面中的id属性对于该页来说应该是唯一的，因此在页面中不能有多个id值，但是确实有。例如:

<form id="form1">
  <input id='four' type='text' />
  <input id='five' type='text' />
</form>

: 

<form id="form1">
  <input id='seven' type='text' />
  <input id='eight' type='text' />
</form>

两个表单具有相同的id值，这是一个不好的做法。

第二，你张贴到javascript文件，哪一个是你实际使用?

我为你测试了第一个js脚本: 
$('#do').click(function() {
   $('#three').val($('#one').val());
});
$('#four').keyup(function() {
   $('#six').val($('#four').val());
});
$('#seven').blur(function() {
  $('#nine').val($('#seven').val());
});

然而，你在HTML页面底部发布的第二个js文件不会做这项工作，因为它指的是不存在的id值，如:#pDate1和#fdatea

相关文章：