【问题讨论】：
pattern 属性，检查我的答案
标签： javascript html css angularjs
我有最简单的代码来防止多个点，它还可以防止一些其他无效值：
$('input[type=number]').on('keydown', function (e) {
var keyCode = e.keyCode || e.which;
if ((keyCode == 190 || keyCode == 110) && (e.currentTarget.validity) && (!e.currentTarget.validity.valid))
{
e.preventDefault();
return false;
}
});
【讨论】：
我知道，它是旧的。我不确定您是否需要检查 indexOf 等过于复杂的解决方案...
我需要（以及我在这里展示的）是限制用户输入（正/负）数字，最多 2 个小数，没有字母，没有双点或其他东西。
<input type="text" value="0"/>
$("input").on('input', function(e){
let {value} = e.target;
let processedValue = value
.replace(/[^\d.\-]/, "")
.replace(/^([\-]{0,1})(\d*)((\.\d{0,2}){0,1})(.*)$/g, "$1$2$3")
$("input").val(processedValue);
});
我的正则表达式可能有点粗糙，但它有效。简而言之，它正在清理任何不是数字和点的东西，然后只用点的第一部分。
【讨论】：
原分享here
你可以找到非常详细的解释in this Codepen
这个解决方案很简单，并且只允许在数字字段中使用一个点。它不会阻止点击返回号码并在"." 之前添加号码。它不会阻止执行浏览器键盘快捷键，例如刷新、复制和粘贴（只要粘贴的值是有效数字）等。它将允许在数字正文中添加"."，但会删除任何超出设置限制的浮动。
我仍然无法阻止的唯一行为是，如果您在输入结束时反复按点键，点会闪烁。发生这种情况是因为"13." 的类型化值是有效数字并返回"13"，而"13.." 的类型化值不是并返回“”。在我的解决方案中，如果一个值返回"" 而没有按退格键或删除键，它会回滚到最后一个有效值，即"13"，它是从键入的值"13." 获得的。
我已经尝试过解决方案，如果一个点被按下一次，它会被阻止第二次触发，但每次我设法在已经存在的点之后按下点，然后什么都没有，然后得到除非我先按任何其他键，否则无法键入点。
我认为多次按下时闪烁是最好的解决方案，因为用户无法键入一个点而没有任何反应。
let lastValidInputValue;
let selectedDot = false;
const onKeypress = (e) => {
if (e.key === "." && e.target.value.indexOf(".") !== -1 && !selectedDot) e.preventDefault();
selectedDot = false;
if (e.key === "e") e.preventDefault();
};
const onInput = (e) => {
if (
e.target.value.indexOf(".") < e.target.value.length - e.target.getAttribute("data-toFixed") - 1 &&
e.target.value.indexOf(".") !== -1
) {
let newValue;
newValue = e.target.value.slice(
0,
e.target.value.indexOf(".") +
parseInt(e.target.getAttribute("data-toFixed")) +
1
);
newValue = parseFloat(newValue);
e.target.value = newValue;
}
if (e.target.value !== "") {
lastValidInputValue = e.target.value;
} else if (e.inputType.match(/delete/g)) {
lastValidInputValue = "";
} else {
e.target.value = lastValidInputValue;
}
};
const onSelect = (e) => {
if(window.getSelection().toString().indexOf(".") > -1) selectedDot = true;
}<input type="number" id="myNumber" name="myNumber" data-toFixed="2" step="any" onkeypress="onKeypress(event)" oninput="onInput(event)" onselect="onSelect(event)">【讨论】：
你可以使用pattern属性：
<input type="text" pattern="[0-9]+([\.,][0-9]+)?">
它将允许带有单个点甚至逗号的模式（例如欧洲小数）。要删除逗号，应该是：
<input type="text" pattern="[0-9]+([\.][0-9]+)?">
【讨论】：
您可以使用 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">对selectionStart 的额外检查确保您仍然可以删除所有数字：空输入被视为无效数字，但无法从输入中删除最后一个字符会很奇怪。
尽管这是您在问题中提出的要求，但请注意，阻止用户输入并不是特别方便用户。当输入无效时（在提交值时，例如当您离开输入字段时），浏览器会提供视觉线索，这通常是应该如何完成的。您不希望人们认为他们的键盘出现故障，或者让他们认为剪贴板是空的，因为他们的复制/粘贴“不起作用”。
【讨论】：