如何让输入框仅开头可带负号且实现-1最小值限制？

问题分析 #

1. input type="text" 不支持 min 属性，该属性仅对 number、range 等数值类型输入框生效，所以原代码的 min="-1" 完全不起作用。
2. 现有正则未限制负号位置，导致负号可以出现在任意位置，需要调整正则规则强制负号仅能在开头。

修改后的代码 #

<input type="text" id="mynumber"
       oninput="
         // 第一步：仅保留数字、小数点和开头的单个负号
         this.value = this.value.replace(/[^0-9.-]/g, '')
                                // 移除开头以外的所有负号
                                .replace(/(?!^)-/g, '')
                                // 仅保留一个负号在开头
                                .replace(/^(-).*\1/g, '$1')
                                // 仅保留一个小数点
                                .replace(/(\..*)\./g, '$1');
       "
       onblur="
         // 失去焦点时校验最小值，小于-1则强制设为-1
         const num = parseFloat(this.value);
         if (!isNaN(num) && num < -1) {
           this.value = '-1';
         }
       " />

代码说明 #

• 负号位置限制：
  • replace(/(?!^)-/g, '')：移除所有不在开头位置的负号（(?!^) 是负向断言，匹配非开头的位置）。
  • replace(/^(-).*\1/g, '$1')：确保开头最多只有一个负号，避免出现多个连续负号。
• 最小值校验：
  • 使用 onblur 事件在输入框失去焦点时，将输入值转为数字，若小于 -1 则自动修正为 -1。如果需要实时校验，也可以把这部分逻辑移到 oninput 里，但可能会影响输入体验（比如输入 -2 时会立刻变成 -1）。
• 保留原有校验：保留了原有的移除非数字字符、仅保留单个小数点的逻辑。

可选优化：改用number类型输入框 #

如果允许使用 type="number"，可以简化逻辑，原生支持 min 属性，同时减少正则处理：

<input type="number" id="mynumber" min="-1" step="any"
       oninput="
         // 处理负号（number类型可能允许中间输入负号，需要修正）
         if (this.value.includes('-') && !this.value.startsWith('-')) {
           this.value = this.value.replace(/-/g, '');
         }
       " />

• step="any" 允许输入小数，否则默认只能输入整数。
• 虽然number类型支持min，但仍需处理用户在中间输入负号的情况，所以保留了简单的负号位置校验。

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