如何在React输入框中限制用户输入+字符？

有两种可靠的方式实现限制+字符输入，同时保留原有输入规则（波斯语、英语字母及数字）：

方法一：实时过滤输入内容（推荐） #

直接修改onChange事件处理逻辑，用正则表达式过滤掉所有+字符，不管是手动输入还是粘贴的内容都会被处理：

<Input
  maxLength={70}
  type="text"
  dir="rtl"
  ref={titleRef}
  id="title"
  value={title}
  onBlur={(e) => setTitle((prev) => prev.trim())}
  onChange={(e) => setTitle(e.target.value.replace(/\+/g, ''))}
  required
/>

解释：replace(/\+/g, '')会全局匹配并移除所有+字符，确保输入框的值始终不包含该字符，完全不影响原有支持的其他字符类型。

方法二：阻止+字符的输入事件（仅限制手动输入） #

通过onKeyDown事件阻止+键的输入，但这种方法无法处理粘贴包含+的内容，适合仅需限制手动输入的场景：

<Input
  maxLength={70}
  type="text"
  dir="rtl"
  ref={titleRef}
  id="title"
  value={title}
  onBlur={(e) => setTitle((prev) => prev.trim())}
  onChange={(e) => setTitle(e.target.value)}
  onKeyDown={(e) => {
    if (e.key === '+') {
      e.preventDefault();
    }
  }}
  required
/>

优先推荐方法一，能覆盖所有输入场景，确保提交的标题不会包含+字符，从根源避免服务器报错。

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