HTML number输入框min=0时输入.2识别为0.2实现方案问询

实现方案 #

问题原因 #

原生HTML的type="number"输入框默认不会自动补全.开头的小数前导零，读取value属性时会将不完整的.2这类输入识别为无效值，返回空或0，属于浏览器原生行为。

改动思路 #

在保留原有min=0、step="any"配置和合法性校验逻辑的前提下，仅修改oninput事件的处理逻辑，自动为开头的.补前导零即可。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>

</style>
</head>
<body>

<input  id="stockiboundqty0"  min=0 oninput="if(value.startsWith('.')) value = '0' + value; validity.valid||(value='');" step="any"  autocomplete="off" type="number" placeholder="Enter Quantity"/>
<button onclick="alertdialog()">submit</button>
<script>
function alertdialog()
{
alert(document.getElementById("stockiboundqty0").value);
}
</script>
</body>
</html>

改动说明 #

• 仅在原有oninput逻辑前新增了前导零补全逻辑：判断输入内容以.开头时，自动在前面拼接0，将.2自动转换为0.2
• 原有min=0、step="any"配置完全保留，原有合法性校验逻辑也没有改动，不符合规则的输入依然会被清空
• 处理后用户输入.2时，输入框会自动补全为0.2，读取value即可得到正确的0.2
• 如果需要兼容低版本浏览器，可将value.startsWith('.')替换为value.charAt(0) == '.'，效果一致

内容的提问来源于stack exchange，提问作者A. Chithrai