如何将输入文本显示格式设置为十进制0.00

Question

我正在使用<input type="text">提供员工的工作时间。我希望将文本格式显示为0.00，并使其仅接受两位数字和两个十进制数字作为小数格式。

​

<td>
     <input type="text" asp-for="NormalHrs" class="col-sm-5" maxlength="5" onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||event.charCode == 46 || event.charCode == 0 " />
</td>

​

Answer 1

尝试使用验证方法检查输入的值是否经过验证，如果没有，请清除该值并重新输入，否则格式化数据。

代码如下：

<input type="text" asp-for="NormalHrs" placeholder="0.00" value="" class="col-sm-5" maxlength="5" 
       onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||event.charCode == 46 || event.charCode == 0 " 
       onfocusout ="validateinput(this)"
       /> 
<script> 
    function validateinput(el) {
        if (parseFloat(el.value) < 99 & parseFloat(el.value)>0) {
            el.value = parseFloat(el.value).toFixed(2);
        }
        else {
            //show invalidate message.
            //clear the input value.
            el.value = "";
        }
    };
</script>

截图：

​

​

Answer 2

这里有一个我认为可以满足你所有需求的例子。它设置了一些验证规则供浏览器检查。该示例只允许输入数字，并配置了允许的最小值、最大值以及输入的详细程度。

用户可以输入00007.22，但如果您将其视为服务器上的一个数字或删除前导零，这不是问题。也不要忘记执行服务器端验证，您不应该对客户端有太多的信任。

​

<form action="/post">
    <label>Fill in your working time: </label>
    <input type="number" step="0.01" min="0" max="8" />
    <input type="submit" />
</form>

​

Answer 3

我们可以在js中这样做，

首先创建一个事件(focusout/onclick哪个是你喜欢的)

输入类型应为'number‘

<input type="number" onfocusout="setTwoNumberDecimal(this)" step="0.01" value="0.00"/>

function setTwoNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(2);
    };