限制输入 HTML 字段中的空格

Question

我正在使用 React 编写一个网站，我遇到了一个有趣的问题。

我有一个简单的组件，用户可以在其中输入文本。该组件是使用 HTML 输入字段实现的。

 const Title = () => {
  return (
      <span>
        Name title
      </span>
      <input
        id="name_title"
        onChange={(event) => setNameTitle(event.target.value)}
        value={NameTitle}
      />
  );
};

export default Title;

我的问题是处理空格。默认情况下，不会以任何方式处理空格，因此用户可以输入任意数量的空格。但正如你所理解的，这是不正确的。我愿意 :

1. 禁止在带有空格的字段中开始输入。也就是说，用户不能输入空格作为字段中的第一个字符；
2. 限制单词之间的空格数量。不超过一个。也就是说，空格后面不能跟空格。

我认为这是一个非常有用的东西，但不幸的是我完全没有找到关于这个问题的信息。告诉我如何解决这个问题

Answer 1

在 JavaScript 中，您可以使用 String.prototype.trimStart() 函数删除字符串开头的空格。要消除字符串中的任何空格（单词之间的空格），您需要使用 String.prototype.replace() 函数来替换长度超过 1 个字符的空格（通过使用正则表达式）。 这行代码应该可以解决问题： onChange={(event) => setNameTitle(event.target.value.trimStart().replace(/\s+/g, " ") 首先，使用trimStart()函数删除字符串开头的空格，然后删除重复出现一次或多次的空格（在正则表达式中用“\s”表示）（在正则表达式中用“+”表示）对于该字符串（用“g”表示）中所有出现的带有“”字符的情况。 但是，如果您将该输入中的值提交给函数或 Web 服务器，则这不会消除该字符串中的最后一个单数空格（如果存在）。因此，在提交之前，请确保使用 NameTitle.trimEnd() 删除该字符串中的最后一个空白字符（如果存在）。