如何允许用户覆盖输入类型编号中的数字(当已经有两个数字时)?

Question

请参阅下面的JavaScript：

maxLengthDay(event) {
const maxLength = 2;
if (event.target.value.length + 1 > maxLength)
return false;
else
return true;
}

和下面的 html：

<input (keypress)="maxLengthDay($event)" type="number" />

它按预期工作，即确保输入框最多只包含两个字符。 如果用户突出显示该数字(特别是当有两个数字时(并尝试覆盖一个或两个数字时，则会出现此问题。 没有任何反应，因为输入控件在该点包含两个数字。

如何允许用户覆盖输入控件中的数字(当已经有两个数字时(？

Answer 1

我会设置min和max属性，然后检查输入时数字的有效性，并将任何越界设置为最大值或最小值。

document.getElementById('num').addEventListener('input', function(e)
{
if(e.target.validity.rangeOverflow)
{
e.target.value = e.target.max;
}
if(e.target.validity.rangeUnderflow)
{
e.target.value = e.target.min;
}
});

<input type="number" min="0" max="99" id="num">

Answer 2

也许，您可以添加一个超时处理程序，允许用户继续输入值，但仅保留最后输入的 2 位数字。

为了使代码片段起作用，下面的示例是基于纯 JS 的。 它也可以扩展到 Angular 代码中使用。

function maxLengthDay(event) {
setTimeout(() => {
const maxLength = 2;
if (event.target.value.length + 1 > maxLength) {
var v = event.target.value;
event.target.value = event.target.value.substr(v.length - 2, v.length);
}
}, 0);
}
document.addEventListener('keypress', maxLengthDay);
document.addEventListener('paste', maxLengthDay);

<input  type="number" />

Answer 3

根据我在评论中读到的内容，由于粘贴到输入框，我已将keypress更改为input。

<input type="number" min="0" max="99" (input)="maxLengthDay($event)">

输入限制为 0 到 99 之间的值，但这仅适用于递增和递减箭头。它还可用于确定该值是溢出最大值还是下溢最小值

如果值结束，那么它只是切片前两个数字并将它们用作值。

如果它低于，则将其最小值设置为值。

maxLengthDay(event) {
if(event.target.validity.rangeOverflow) {
event.target.value = event.target.value.slice(0, 2);
}
if(event.target.validity.rangeUnderflow) {
event.target.value = event.target.min;
}
}