javascript - 如何使用根据文本框 B 和文本框 C 的值计算的值填充文本框 A？

Question

我有 3 个文本框。

<input type="text" name="width" class="width" />

<input type="text" name="width_feet" class="width_feet" />

<input type="text" name="width_inches" class="width_inches" />

最终用户可以在文本框 width_feet 中输入一个数字，在 width_inches 中输入一个数字。我的目标是执行计算，将英尺和英寸转换为毫米，然后用结果填充文本框宽度。

到目前为止，我已经尝试了以下方法，但效果似乎不太好，因为填充文本框 width 的结果太大了。

jQuery('.width_feet, .width_inches').change(function() {
    var feet = jQuery('.width_feet').val();
    var inches = jQuery('.width_inches').val();
    var total_inches = (feet * 12) + inches;
    var mm = total_inches * 25.4;
    jQuery('.width').val(mm);
});

JSFIDDLE

我哪里出错了？

Answer 1

使用.toFixed() chop 不需要的小数点，

jQuery('.width_feet, .width_inches').on('input',function() {
    var feet = jQuery('.width_feet').val();
    var inches = jQuery('.width_inches').val();
    var total_inches = (feet * 12) + inches;
    var mm = total_inches * 25.4;
    jQuery('.width').val(mm.toFixed(1));
});

而且我建议您使用 input 事件而不是 change，因为只有当焦点从文本框中模糊时才会触发 change 事件。

DEMO

---

除此之外，您的代码未能将字符串转换为数字，这就是您的计算变得疯狂的原因。尝试使用 parseInt(string,radix) 将字符串转换为数字。

jQuery('.width_feet, .width_inches').on('input', function () {
        var feet = parseInt(jQuery('.width_feet').val(), 10);
        var inches = parseInt(jQuery('.width_inches').val(), 10);
        var total_inches = ((isNaN(feet) ? 0 : feet) * 12) + (isNaN(inches) ? 0 : inches);
        var mm = total_inches * 25.4;
        jQuery('.width').val(mm.toFixed(1));
});

DEMO

我忘了说 .isNaN() 函数，我们在代码中使用了它，因为在解析空文本框的值时，输出将是 NAN意思不是数字，所以在我们的代码中，我们通过用 0

替换它来处理 NAN

---

根据评论，您应该使用 parseFloat() 而不是 parseInt()，因为您正在处理浮点值。