reactjs - 如何将模式应用于 TextField 以仅允许特定字符
问题描述
我只想允许将特定字符输入到 Material-UI 文本字段中。我已经看到了我尝试过的不同示例,但我无法让它们中的任何一个起作用。在我最后一次尝试中,我将所有内容都削减到最低限度并拥有这个
<TextField
inputProps={{ pattern: "[a-z]" }}
/>
似乎该模式只是被忽略了。
这仍然是应用模式的有效方法吗
感谢任何可以帮助我的人
解决方案
下面是一个显示此工作的示例。输入的 "pattern" 属性不会阻止输入无效字符,但它会用 ":invalid" 伪类标记输入。这是您可以阅读更多信息的一种资源。我添加了一些样式,以便您可以判断该模式是否有效。
如果您想防止输入无效字符,那么您可以查看我之前使用 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);
推荐阅读
- google-chrome - 用于本地 Win10 原生应用和 Web 应用之间通信的自签名证书
- python - sqlalchemy.exc.ProgrammingError:(psycopg2.ProgrammingError)不能适应类型'dict'
- google-apps-script - 偏移量/while 循环问题 - 使用 google 应用程序脚本从列表中下载 mailchimp 'members' 数据
- class - 为什么我的对象 ArrayList 打印出存储在对象内的一个变量,而不是另一个
- javascript - 如何在 JavaScript 的列中选择单个值?
- firebase-authentication - 用于 UserRecord 的 onUpdate 云功能?
- inheritance - 在pyomo中获取一个实例来继承另一个实例的约束
- python - 根据值随机选择字典键
- javascript - 获取:名为“数据库”的 Firebase 服务已注册错误,即使我没有在任何地方导入 firebase/database
- vue.js - SPA 调用 NET Core Rest API 进行外部身份验证 (OAuth)