Question

我在将HTML5中的输入类型编号与oninput事件结合使用时遇到问题，使其具有可选的最大长度qith和可选的n个最大十进制数。我有以下示例代码：

<input type="number" name="name" step="any"
oninput=" this.value = (this.value.length > 8) ? this.value.slice(0,8) : this.value; /^[0-9]+(.[0-9]{1,3})?$/.test(this.value) ? this.value : this.value = this.value.slice(0,-1); ">

它工作正常，除了按下一个点可以删除整个数字而没有任何错误。它可以与'，'一起使用，但在移动设备上，我将需要'。'。用于键盘。（我需要使用'，'就像现在一样工作）

Answer 1

由于您只想控制总数及其小数部分的长度，因此我建议使用keydown事件而不是input事件。以下表达式

<input type="number" name="name" step="any" onkeydown=
"return event.keyCode<32 || this.value.length<8 && /^\d*([.,]\d{0,2})?$/.test(this.value)"
>

如果输入的字符超过8个，则禁止输入
如果输入的小数点后3个以上，则禁止输入
允许使用特殊键，例如退格键
禁止非数字输入（由type="number"自动输入）

Answer 2

您的主要问题是，如果您输入非数字字符，则文本将消失。（取决于您的浏览器的本地化设置，点可能被视为非数字。）问题在于，输入非数字值会使元素处于无效状态，而元素的值cannot be retrieved会变成无效状态。

幸运的是，HTML可以使用step属性自行进行此验证。您不满意立即删除不良字符，但是一旦失去焦点，输入将显示为无效。并且，如果需要，您可以为元素设置自定义错误消息。

<input
    id="identification"
    type="number"
    name="name"
    step="0.001"
    min="0"
    max="99999999"
/>

HTML5输入类型编号+ oninput regex验证会擦除该字段，并按点

2 个答案: