我只想允许在 Material-UI TextField 中输入特定字符。我见过我尝试过的不同例子,但我无法让它们中的任何一个工作。
在我最后一次尝试中,我将一切都削减到最低限度,并得到了这个
<TextField
inputProps={{ pattern: "[a-z]" }}
/>
似乎这种模式只是被忽略了。
这仍然是应用模式的有效方法吗
感谢任何可以帮助我的人
下面是一个显示此工作原理的示例。输入上的“pattern”属性不会阻止输入无效字符,但它会用“:invalid”伪类标记输入。这是一个资源 https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145您可以在哪里阅读更多内容。我添加了一些样式,以便您可以看出该模式正在发挥作用。
如果您想防止输入无效字符,那么您可以使用react-text-mask查看我之前的示例(基于演示)的答案:如何设置material-ui TextField 仅接受十六进制字符 https://stackoverflow.com/questions/53981996/how-can-i-set-material-ui-textfield-to-accept-only-hexidecimal-characters/53989369#53989369
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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)