如何将模式应用于文本字段以仅允许特定字符

Question

我只希望将特定字符输入到Material-UI TextField中。我看到了一些尝试过的不同示例，但我无法使它们起作用。 在最后一次尝试中，我将所有内容都削减到最低限度，并且做到了

<TextField
  inputProps={{ pattern: "[a-z]" }}
/>

似乎该模式只是被忽略了。

这仍然是应用图案的有效方法

谢谢任何能帮助我的人

Answer 1

下面是显示此工作方式的示例。输入的“ pattern”属性不会阻止输入无效字符，但会使用“：invalid”伪类标记输入。 Here is one resource，在这里您可以阅读更多内容。我添加了一些样式，以便您可以判断该模式是否有效。

如果要防止输入无效字符，则可以使用react-text-mask How can I set material-ui TextField to accept only Hexidecimal characters

查看我以前的示例答案（基于演示）。

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  input: {
    "&:invalid": {
      border: "red solid 2px"
    }
  }
};
function App({ classes }) {
  return (
    <TextField
      inputProps={{ className: classes.input, pattern: "[a-z]{1,15}" }}
    />
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);