前端限制输入框只能输入两位数字

在前端开发中，为了限制HTML输入框input只能输入两位数字，通常可以利用JavaScript或者HTML5的特性来实现。这里有几个简单的示例：

**1. HTML + JavaScript (最常见)**

<input type="number" id="numericInput" oninput="this.value = this.value.replace(/\D/g, '').slice(0, 2);" />

这段代码中，`oninput`事件会监听输入的变化，`replace(/\D/g, '')`移除所有非数字字符，`.slice(0, 2)`则限制输入长度不超过两位。

**2. HTML5 input pattern属性**

<input type="number" id="numericInput" pattern="[0-9]{1,2}" title="请输入1到2位数字" />

pattern属性定义了输入验证规则，`[0-9]{1,2}`表示一到两个连续的数字。

**3. 使用React等框架**

import React, { useState } from 'react';

function NumericInput() {
  const [value, setValue] = useState('');

  function handleChange(e) {
    setValue(Number(e.target.value).toString().slice(0, 2));
  }

  return (
    <input type="number" value={value} onChange={handleChange} maxLength={2} />
  );
}

在React组件中，我们同样监听onChange事件，限制值的长度并确保始终为数字。