gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 14:06:39 26 4
gpt4 key购买 nike

我只想允许在 Material-UI 文本字段中输入特定字符。我见过我尝试过的不同例子,但我无法让它们中的任何一个工作。在我最后一次尝试中,我将一切都削减到最低限度,并得到了这个

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

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

这仍然是应用模式的有效方法

感谢所有能帮助我的人

最佳答案

下面是一个显示此工作原理的示例。输入上的“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);

Edit TextField pattern

关于reactjs - 如何将模式应用于文本字段以仅允许特定字符,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55258192/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com