如何将number类型分钟输入框限制为仅接受0-59的数值？

我懂你的困扰——number类型输入框的min和max属性看起来没完全生效，手动输入还是能敲出99对吧？这其实是浏览器的默认行为：min和max主要管表单提交验证、以及输入框上下步进按钮的逻辑，手动输入时不会主动拦截超出范围的数值。

给你两个关键改进点，结合起来就能完美解决这个问题：

1. 优化输入事件处理逻辑 #

把原来的oninput和onkeyup逻辑整合，同时处理长度限制和数值范围限制。首先修改你的输入框代码（注意去掉重复的maxlength属性，你原来的代码里写了两次）：

<input id="minutes" name="minutes" class="form-control ui-control del-keyup tr-ui-witdh text-center" 
       placeholder="00" type="number" min="0" max="59" maxlength="2" 
       onkeyup="handleMinutesInput(this);" onclick="getMessage();" 
       onchange="getMessage();" oninput="handleMinutesInput(this);">

然后添加对应的处理函数：

function handleMinutesInput(el) {
    // 先限制输入长度最多2位
    if (el.value.length > el.maxLength) {
        el.value = el.value.slice(0, el.maxLength);
    }
    
    // 把输入值转成数字，处理空值或非数字的情况
    const inputNum = parseInt(el.value, 10);
    if (isNaN(inputNum)) {
        el.value = '';
        getMessage();
        return;
    }
    
    // 强制限制数值在0-59之间
    if (inputNum < 0) {
        el.value = 0;
    } else if (inputNum > 59) {
        el.value = 59;
    }
    
    // 执行你原来的getMessage函数
    getMessage();
}

2. 额外优化（可选） #

如果不想让用户输入小数点，可以在函数里再加一行判断，过滤掉小数部分：

// 在转数字之前先去掉小数点
el.value = el.value.replace(/\./g, '');

另外，加上inputmode="numeric"可以让移动端弹出纯数字键盘，提升用户体验：

<input ... inputmode="numeric" ... >

这样修改后，不管用户手动输入什么，都会被实时修正到0-59的范围内，同时保持最多2位的长度限制。

内容的提问来源于stack exchange，提问作者farooq