有没有办法阻止输入类型=“数字”获得多个点值？

I want to get only decimal values like 1.5,0.56 etc. but its allowing more than one dot. is there any way to prevent it

我想只获得像1.5,0.56等十进制值，但它允许多个点。有没有办法阻止它

2 个解决方案

#1

You can use pattern attribute:

您可以使用模式属性：

 <input type="number" pattern="[0-9]+([\.,][0-9]+)?">

It will allow patterns with a single dot, or even a comma (european decimals for example). To remove the comma, should be:

它将允许带有单个点的图案，甚至是逗号（例如欧洲小数）。要删除逗号，应该是：

 <input type="number" pattern="[0-9]+([\.][0-9]+)?">

#2

You could use JavaScript to capture any change in the input value, and check whether the inputAsNumber property is still a valid number. If not, you could revert to the previous value:

您可以使用JavaScript捕获输入值的任何更改，并检查inputAsNumber属性是否仍然是有效数字。如果没有，您可以恢复到以前的值：

restoreData = {};

inp.oninput = preventTwoDots;
restoreData['inp'] = inp.value;

function preventTwoDots() {
    if (isNaN(this.valueAsNumber) && this.selectionStart) {
        this.value = restoreData['inp'];
    }
    restoreData['inp'] = this.value;
}

<input type="number" id="inp">

The extra check on selectionStart makes sure that you can still remove all digits: an empty input is considered an invalid number, but it would be strange to not be able to delete the last character from the input.

对selectionStart的额外检查确保您仍然可以删除所有数字：空输入被视为无效数字，但是无法从输入中删除最后一个字符会很奇怪。

Remarks

Although this is what you asked for in your question, please note that blocking user input is not particularly user-friendly. Browsers give visual clues when the input is not valid (on committing the value, for instance when you leave the input field), which generally is how it should be done. You don't want people to think their keyboard is failing, or let them think the clipboard is empty because their copy/paste is "not working".

虽然这是您在问题中要求的，但请注意阻止用户输入并不是特别方便用户。当输入无效时（例如，当您离开输入字段时提交值），浏览器会提供视觉线索，这通常是应该如何完成的。您不希望人们认为他们的键盘出现故障，或者让他们认为剪贴板是空的，因为他们的复制/粘贴“无效”。