使用 JavaScript 检测周期符号对数字输入模式无效

Question

我有一个类型为数字的输入标签，上面附加了模式验证，它至少已经处理了从输入中消除"e"+"-"字符。但是，由于某种原因，"."符号仍然通过。以下是我的程序中代码的相关部分：

<input type="number" id="job-priority" min="1" max="99" pattern="[0-9]+" placeholder="1 (High) — 99 (Low)" style="width:186px; padding-left:14px; text-align:center;">
document.getElementById('job-priority').addEventListener('input', function () {
// Check that characters typed into job priority field are valid.
if (!document.getElementById('job-priority').validity.valid) {
var value = document.getElementById('job-priority').value;
value = value.slice(0,-1);
document.getElementById('job-priority').value = value;
}
});
document.getElementById('job-priority').addEventListener('change', function () {
// Check that number entered into job priority stays within limits.
var value = Number(document.getElementById('job-priority').value);
var min = Number(document.getElementById('job-priority').min);
var max = Number(document.getElementById('job-priority').max);
if (value < min)
document.getElementById('job-priority').value = min;
else if (value > max)
document.getElementById('job-priority').value = max;
});

从我自己对此的研究到这一点，我之前在 StackOverflow 上遇到了一篇关于输入类型编号的输入模式的问题文章。简而言之，这篇文章证实了输入模式不适用于输入类型编号。它提出了仅使用输入类型文本而不是仅允许数字通过的模式的解决方案。但是，我想将输入类型保留为数字，因为向上/向下箭头会增加/减少输入字段中的数字。只有在有办法保持向上/向下箭头有问题的情况下，我才愿意将输入类型更改为文本。

我还看到，如果我从输入标签中删除模式，我的"input"事件侦听器仍然成功地处理了以某种方式不允许"e"+"-"字符。当然，"."符号在不应该的时候仍然被允许。所以我想至少我确认了这种模式实际上并没有从我能说的做任何事情。

更具体地说，如果键入"."作为第一个字符，则验证检查成功工作，并且输入字段中不显示任何所需行为。但是，如果键入的第一个字符是数字，然后键入的第二个字符是"."符号，则由于某种原因，"."符号在不应该出现时出现。

Answer 1

想出了我的问题的解决方案。

document.getElementById('job-priority').addEventListener('input', function () {
// Check that characters typed into job priority field are valid.
document.getElementById('job-priority').type = 'text';
if (!document.getElementById('job-priority').validity.valid) {
var value = document.getElementById('job-priority').value;
value = value.slice(0,-1);
document.getElementById('job-priority').value = value;
}
document.getElementById('job-priority').type = 'number';
});

您将看到我所做的只是为了输入验证而暂时将输入类型更改为"文本"。然后，一旦完成，立即将输入类型更改回"数字"。