如何设置HTML number类型输入框仅允许-1及正整数排除0和其他负数

min/max 原生属性仅支持单段连续取值范围，确实无法直接满足多段区间的限制要求。保留type="number"属性的前提下，通过输入行为拦截+最终值校验的两层逻辑即可实现规则，可覆盖键盘输入、内容粘贴、滚轮调值、点击输入框上下箭头调值所有输入场景。

适配你现有Angular代码的可落地方案 #

首先修改input模板，绑定对应事件：

<input
  [readonly]="isDisabled"
  type="number"
  aria-label="Character limit"
  class="form-control border-0"
  (keydown)="onNumberKeydown($event)"
  (input)="onNumberInput($event)"
  (paste)="onNumberPaste($event)"
>

在组件类中添加对应处理逻辑，建议提前声明一个变量存储上一次合法值，避免非法输入时直接清空带来的体验问题：

lastValidNum: number | '' = '';

onNumberKeydown(e: KeyboardEvent) {
  // 放行所有功能按键、快捷键组合
  const allowKeys = ['Backspace', 'Tab', 'Enter', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
  if (allowKeys.includes(e.key) || e.ctrlKey || e.metaKey) {
    return;
  }
  // 阻止输入数字、负号以外的字符
  if (!/^[\d-]$/.test(e.key)) {
    e.preventDefault();
  }
}

onNumberInput(e: Event) {
  const inputEl = e.target as HTMLInputElement;
  const currentVal = inputEl.value;
  // 空值暂不处理，可按需自行添加必填校验
  if (currentVal === '') {
    this.lastValidNum = '';
    return;
  }
  const numVal = Number(currentVal);
  // 校验规则：值必须是-1 或 ≥1的整数，需要支持小数可去掉Number.isInteger判断
  if (numVal === -1 || (numVal >= 1 && Number.isInteger(numVal))) {
    this.lastValidNum = numVal;
    return;
  }
  // 非法值回退到上一次合法值
  inputEl.value = String(this.lastValidNum);
}

onNumberPaste(e: ClipboardEvent) {
  const pasteContent = e.clipboardData?.getData('text')?.trim() || '';
  const pasteNum = Number(pasteContent);
  // 粘贴内容不符合规则直接阻止
  if (pasteNum !== -1 && !(pasteNum >=1 && Number.isInteger(pasteNum))) {
    e.preventDefault();
  }
}

轻量方案（仅表单提交时校验） #

如果不需要实时拦截非法输入，只需要在表单提交时触发校验，可以直接给input加pattern属性，配合原生校验提示即可，代码量最少：

<input
  [readonly]="isDisabled"
  type="number"
  aria-label="Character limit"
  class="form-control border-0"
  pattern="^(-1|[1-9]\d*)$"
  title="仅允许输入-1或大于等于1的正整数"
>

注意：不同浏览器对type="number"输入框的pattern属性支持存在差异，部分浏览器不会在输入过程中拦截非法值，仅会在表单提交时触发校验提示，对输入实时性要求高的场景不建议用这个方案。

踩坑提示 #

• 不要只靠keydown事件做拦截：用户通过滚轮调整值、点击输入框自带的上下箭头改值、拖拽文本填入内容等场景不会触发keydown事件，必须通过input事件做最终值兜底校验。
• 不要直接设置min="-1"：该设置会允许-1到1之间的所有小数、0值，不符合限制规则。

内容的提问来源于stack exchange，提问作者Balázs Patai