type="number" 的子输入字段在我编辑后不会更新答案

【问题标题】：child input field with type="number" won't update after I edit ittype="number" 的子输入字段在我编辑后不会更新
【发布时间】：2014-07-02 16:07:12
【问题描述】：

我认为我遇到了 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>

【问题讨论】：

不，实际上不是。它第一次工作，因为第二个输入字段是空的。如果它已填充/更改，它只会写入一个属性 value="xxx" 但根本不会更改数字。

标签： jquery html input numbers

【解决方案1】：

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

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

你应该使用 val() 而不是 attr('value' .. ) 因为那是更新输入字段值而不是属性值。

小提琴Fiddle

JS：

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

E：你小提琴中的 jQuery 版本是 1.8.3。这就是你的小提琴工作的原因。在您的代码中它是 1.11，对于该版本，您可以使用我提供的代码

【讨论】：

不同的是旧的jquery版本。 OP 在他的小提琴中使用 1.8，但在他的代码中使用 1.11