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 中输入一个数字。我的目标是执行计算以将英尺和英寸转换为mm，然后使用结果填充文本框 width 。

到目前为止，我已尝试过以下似乎无法正常工作的内容，因为填充文本框 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()截断不必要的小数点，

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，因为只有当焦点从文本框中弄明白时才会触发更改事件。

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，而不是数字，因此，在我们的代码中，我们通过将其替换为NAN

来处理0

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

Answer 2

您需要将英尺和英寸都转换为数字：

var feet = parseInt(jQuery('.width_feet').val());
var inches = parseInt(jQuery('.width_inches').val());

Answer 3

试试这个..

我已经完成了这个js小提琴，你的问题是文本框值连接。

[http://jsfiddle.net/kka284556/f32rk/1/][1]

Answer 4

尝试这个，

jQuery('.width_feet, .width_inches').on(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(Math.round(mm).toFixed(2));
 });

如何使用从文本框B和文本框C的值计算的值填充文本框A？

4 个答案:

DEMO

DEMO