javascript 如何将文本区域限制为4行项目符号？

6rvt4ljy 于 2022-12-02 发布在 Java

关注(0)|答案(1)|浏览(130)

我想知道是否可以限制用户在文本区域中只能输入4行。我尝试过使用maxRows，但效果不理想。请注意我是如何将maxLength设置为9999999的，因为我不介意在每个项目符号上输入多少文本。我只是想把它限制在最多4个新行字符/项目符号点。如果有人有一个解决方案，我如何可以完成这一点，那将是伟大的。

<TextField
        onKeyUp={handleInput}
        inputProps={{
          maxLength: 9999999
        }}
        sx={{ ...fieldCSS, width: '100%', marginTop: '6px' }}
        multiline
        rows={4}
        value={details}
        onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
          setDetails(event.target.value);
          setCalled({ ...called, detail: true });
        }}
        error={!canSubmitDetails && called.detail}
        helperText={detailsHelperText}
      />

如下图所示，我不希望用户能够输入第4个要点。x1c 0d1x
编辑：添加建议答案后，进行了少量编辑，但event.stopPropagation();不起作用

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    const { code, target } = event;
    const { value } = target as HTMLInputElement;

    if (code === 'Enter') {
      if ([...value].filter((word) => word === '\n').length >= DETAIL_MAX_LINES) {
        event.stopPropagation();
      }
    }
  };

干杯，Has 400

JavaScript

来源：https://stackoverflow.com/questions/74630764/how-to-limit-a-textarea-to-4-rows-of-bullet-points

1条答案

按热度按时间

z31licg01#

您可以使用onKeyDown事件来检查使用者是否按下Enter键。如果是，您可以检查行数是否相等4。如果是，您可以防止Enter键的预设行为。

const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
  if (event.key === 'Enter') {
    const lines = event.currentTarget.value.split('\n');
    if (lines.length === 4) {
      event.preventDefault();
    }
  }
};

<TextField
  onKeyDown={handleKeyDown}
  ...
/>

编辑：看起来enter键方法不起作用，所以尝试使用onChange事件检查行数是否大于4。

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  const { value } = event.target;

  if ([...value].filter((word) => word === '\n').length >= 4) {
    event.stopPropagation();
  }
};
<TextField
        onChange={handleChange}
        ...

赞(0）回复(0）举报 2022-12-02

我来回答

javascript 如何将文本区域限制为4行项目符号？

1条答案

相关问题

热门标签

最新问答