执行撤消/重做时,受控React输入正在中断chrome中的maxLength属性

qv7cva1a  于 2023-03-10  发布在  Go
关注(0)|答案(1)|浏览(117)

我已经建立了一个文本字段,它使用react将提供的输入转换为大写,react接受5个字符的maxLength。
问题:当我尝试执行撤消和重做操作时,文本字段允许的字符数超过maxLength HTML属性中指定的字符数。
重现步骤:
1.后藤链接:https://codesandbox.io/s/textfield-uppercase-material-ui-forked-95ww4t?file=/src/App.js
1.它有一个文本输入,将给定的文本转换为大写,也允许最多5个字符
1.键入“abcdef”。由于最大长度限制,您可以在文本字段中看到“ABCDE
1.按“ctrl+z”5次
1.按“ctrl+y”进行重做
1.现在您可以看到文本框“ABCDEAA”中有7个字符,根据maxLength规范,这是不允许的。
我在chrome和edge浏览器(基于Chrome的浏览器)中遇到了这个问题,但在firefox中没有。我在这里做错了什么吗?或者这个问题需要由Chrome或React修复。
代码:

export default function App() {

const [value, setValue] = useState("");

  const onValueChange = (e) => {
    setValue(e.target.value.toUpperCase());
  };

  return (
    <div className="App">
      <h1>Text Field uppercase</h1>
      <input
        type="text"
        id="input"
        value={value}
        maxLength="5"
        onChange={onValueChange}
      />
    </div>
  );
}
sshcrbum

sshcrbum1#

你的示例代码在Firefox中也不太好用。它可以接受超过5个字符。另外,'ctrl+z'和'ctrl+y'在浏览器中也不太好用。如果你想使用大写,我认为使用CSS样式更方便。你可以参考下面的代码,它在所有三种浏览器中都很好用:

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Text Field uppercase</h1>
      <input
        type="text"
        id="input"
        defaultValue=""
        maxLength="5"
        style={{ textTransform: "uppercase" }}
      />
    </div>
  );
}

相关问题