Firefox - 输入类型数字隐藏小数位[重复]答案

【问题标题】：Firefox - input type number hides decimal places [duplicate]Firefox - 输入类型数字隐藏小数位[重复]
【发布时间】：2015-08-13 09:51:16
【问题描述】：

我在网络表单上得到了一些输入。我在这里计算东西。当我计算东西（使用 JS）时，我每次都使用 .toFixed(2) 函数。
在 IE 和 Chrome 中，数字始终显示为 2 位小数。这就是我想要的。 在 Firefox 中小数位被隐藏了。

以下是我的控制示例：<input type="number" value="19.00" name="tax" id="tax" min="0" step="0.01" class="input_number" tabindex="3">

输出：
- 即：19:00
- FF：19
- 铬：19.00

解决方案：

在可能的重复项和标记的答案的帮助下找到并测试了解决方案。

http://jsfiddle.net/duuy884a/7/

<input type="text" min="0" step="0.01" name="test" id="test" value="" pattern="[0-9]+([,\.][0-9]+)?" />
<input type="text" min="0" step="0.01" name="test2" id="test2" value="" readonly />
<button onclick="set()">check</button> 

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

function set (  ){
    if ( document.getElementById("test").value.length <= 0 ){ return; }

    document.getElementById("test").value = document.getElementById("test").value.replace(/,/g, '.');
    var fInput = parseFloat( document.getElementById("test").value );
    if ( isNumber( fInput ) == true ){
        document.getElementById("test2").value = checkZeros( document.getElementById("test") );
    }
}

function checkZeros ( oInput ){
    if ( oInput.value === '') {
        return;
    }

    oInput.value = parseFloat(  oInput.value ).toFixed(2);    
    oInput.value =  oInput.value.toString();

    if ( oInput.value.indexOf('.') === -1) {
         oInput.value =  oInput.value + '.00';
    }
    while ( oInput.value.indexOf('.') >  oInput.value.length - 3) {
         oInput.value =  oInput.value + '0';
    }

    return oInput.value;
}

【问题讨论】：

我也找到了这个Q，但我认为它对我没有帮助。抱歉没有准确阅读。我认为这可以帮助我，但这意味着我需要为每个输入添加一个事件监听器？我得到了大约 15 个，用户可以在表单中添加更多...
既然您将此字段仅用于输出/显示目的，并且用户不能直接操作该值（至少在您的小提琴中） - 为什么在这里使用 number 字段？简单的text 字段，问题就消失了——不是吗？（这是否证明使用表单元素完全可能是另一个问题。）
实际上我得到了一个用于创建账单的表格。这意味着用户可以在我的输入字段中输入数据并计算总和和其他内容。这就是我使用数字字段的原因。

标签： javascript html firefox

【解决方案1】：

解决方案基于 OP 在答案的 cmets 部分中给出的小提琴。

将test2 输入类型更改为text。它会按照你想要的方式工作。

&lt;input type="text" name="test2" id="test2" value="" readonly /&gt;

【讨论】：

我这样做了，但我的问题中显示的 Outpot 还是一样。
你能出示你的剧本吗？
jsfiddle.net/duuy884a 使用 Firefox 执行此操作，也可能使用其他浏览器。
我发布了一个编辑。看看吧
是的，但这意味着用户也可以输入字母。我尽量避免这种情况，因为它是创建账单的一种形式。

【解决方案2】：

Firefox 将您的值视为字符串而不是数字，尝试将值设置为 19（不带引号），然后使用 toFixed(2) 应将值设置为 19.00 以进行计算。

【讨论】：