Question

我认为我遇到了类型为＆＃34; number＆＃34;的2个HTML5输入字段的问题。我想要的是当我在第一个字段中输入一个数字时，该数字在第二个字段中出现乘以2。我的代码运行良好，直到我修改第二个字段（通过在输入字段中键入数字或其他内容，或者我单击向上/向下箭头来修改字段值）。然后，当我编辑第一个字段时，第二个字段不再更新。

这是我的代码，非常感谢任何帮助。谢谢！

http://jsfiddle.net/6EnWT/

<html>
<head></head>
<body>
<form>
    <input type="number" id="parent" />
    <input type="number" id="child" />
</form>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#parent').on('input', function () {
    $('#child').attr('value', $(this).val() * 2);
});
</script>
</body>
</html>

Answer 1

问题是它正在更新属性值。如果检查#child字段，如果在父项中输入5，则会看到10，但在#child输入中，您输入的数字将保留：

<input type="number" id="child" value="10">

您应该使用val（）而不是attr（＆＃39; value＆＃39; ..），因为这会更新输入字段值而不是属性值。

小提琴Fiddle

JS：

$('#parent').on('input', function () {
  $('#child').val($(this).val() * 2);
});

E：你小提琴中的jQuery版本是1.8.3。这就是你的小提琴正在发挥作用的原因。在你的代码中它的1.11和那个版本你可以使用我提供的代码

编辑后，type =“number”的子输入字段不会更新

1 个答案: