Question

这是我的问题。当我尝试在FireFox中设置输入字段的值时，没有任何反应。我没有收到任何错误。它只是不起作用。它应该在数字后面加两位小数。它在Chrome中完美运行。这是我的jQuery代码......

＆＃13;

$('input.drawer').on('blur', function() {
  var number = parseFloat($(this).val());
  var n = number.toFixed(2);
  $(this).val(n);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input tabindex="1" class="drawer f-right m-left w50 right-text" type="number" placeholder="$0.00" />

＆＃13;

我已尝试使用$(this).attr('value' n);，但这也无效。

Answer 1

因此，它确实“有效”，但Firefox只是以不同方式格式化数字，它会截断0。如果你这样做

$(this).val(6.00);

您会看到它显示6。

如果你这样做

$(this).val(6.50);

它会显示6.5，但也会显示错误，表明它不是有效值。

错误是什么？

输入的默认step值为1，这使得Firefox仅将数字视为有效数字的倍数。

如果设置step="0.01"，则Firefox会将浮点数视为有效。

但格式仍然不正确

但是，这仍然不会显示整数的小数。我想这就是如何给出规范似乎没有描述如何格式化值。

如果格式比数字输入的功能对您更重要，请使用普通文本输入。

Answer 2

这与firefox如何处理数字输入类型有关。 https://bugzilla.mozilla.org/show_bug.cgi?id=1003896

如果这是适合您的输入类型，您可以尝试使用文本。

找到以上引文后面的所有内容只是有趣但无用

例如在Firefox vs Chrome中查看 http://jsbin.com/coyuyipeca/edit?html,js,output

您会在FF中的警报中看到该值确实已正确格式化，但在推送到数字字段时会丢失。将输入更改为

<input tabindex="1" class="drawer f-right m-left w50 right-text" type="text" placeholder="$0.00" />

你会发现它有效。当然，您将失去数字字段的好处（特别是移动输入），因此这取决于该功能对您的重要程度。

注意：我注意到的一件奇怪事情是你将输入设置为

<input tabindex="1" class="drawer f-right m-left w50 right-text" type="number" step=".01" placeholder="$0.00" />

您可以使用增量按钮获取小数，只有在jQuery设置值时才会丢失。不确定这是jQuery还是FF的问题

Answer 3

在以下jsfiddle中，这似乎对我有用：

<input tabindex="1" class="drawer f-right m-left w50 right-text" type="number" placeholder="0.00" />

$('input.drawer').on('blur', function() {
    var number = parseFloat($(this).val());
    var n = number.toFixed(2);
    $(this).val(n);
});

您的确切代码是什么。唯一的问题是你无法输入＆＃39; $＆＃39;符号到数字字段。那会失败。所以对于例如：＆＃39; 3.4512＆＃39;被截断为＆＃39; 3.45＆＃39;设置得当，但是3.4512＆＃39; $ 3.4512＆＃39;当我尝试时，它会被清除。

https://jsfiddle.net/bz0os3kp/1/

您的代码似乎有效。但它确实截断了firefox中的尾随零。

Answer 4

我发现一个似乎可以在Firefox中使用的解决方法。我将输入的类型更改为焦点上的数字，在移动设备上给出了正确的键盘，然后将类型更改回模糊的文本，使我有两个小数位。请参阅下面的代码......

$('input.drawer').on('blur', function(){
    var number = parseFloat($(this).val());
    var n = number.toFixed(2);
    $(this).attr('type','text');
    $(this).val(n); 
});

$('input.drawer').on('focus', function(){ 
    $(this).attr('type','number');
});

$（this）.val（）在FireFox中无效但在Chrome中有效

4 个答案: