将长度约束放在 react js 中的文本字段中

我正在从卡号的用户那里输入，并希望用户输入的长度不得小于且大于12。这是我的文本字段的声明。

<TextField
id="SigninTextfield"
label="Aadhaar number"
id="Aadhar"
lineDirection="center"
required={true}
type="number"
maxLength={12}
style={styles.rootstyle}
erorText="Please enter only 12 digits number"
/>

现在我不明白是否使用 javascript 或任何事件处理程序来限制长度。

可以设置maxLength属性来限制文本框中的文本。

代替onChange方法，您可以将maxLength传递给material-uiTextField的inputProps(小写 i，而不是inputProps)道具。

<TextField
required
id="required"
label="Required"
defaultValue="Hello World"
inputProps={{ maxLength: 12 }}
/>

基本上，我们可以通过inputProps对象编辑所有输入元素的本机属性。

链接到 TextField API

我在这里找到了另一种解决方案。

<TextField
required
id="required"
label="Required"
defaultValue="Hello World"
onInput = {(e) =>{
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
}}/>

<TextField
autoFocus={true}
name="name"
onChange={handleChange}
placeholder="placeholder"
id="filled-basic"
variant="filled"
size="small"
fullWidth
inputProps={{
maxLength: 25,
}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
/>

<TextField
id="username"
name="username"
label={translate('username')}
onChange={handleChange}
onBlur={handleBlur}
value={values.username}
error={Boolean(errors.username) && touched.username}
helperText={(errors.username && touched.username && translate(errors.username))}
required
inputProps={{maxLength :20}}
/>

值得注意的是，Material-ui<TextField />组件没有maxlength属性。但是，原始 html<input>确实如此。因此，您实际上不需要创建任何额外的函数来使其工作。只需使用inputProps使用基本<input>属性

。实际答案是这样的：

inputProps={
{maxLength: 22}
}
// Result => <input maxlength="yourvalue" />

这样做的作用是设置基础<input>的maxlength属性，从而产生：<input maxlength="yourvalue" />。这里要注意的另一件重要事情是您使用inputProps而不是InputProps.您要定位的是小写字母inputProps。

我从材料UI中发现了TextField和Input之间的行为有些奇怪

它们彼此非常相似，我看到的问题如下：

在 TextField 组件上，如果您使用带有大写"I"的 InputProps，则会显示装饰，但另一方面，如果您将其用作小写的"inputProps"，则maxLengthHtml 属性将被视为valid，而不是adorments

我最终使用了INPUT而不是TextField，因此adorments您可以在

<TextField
variant="outlined"
required
fullWidth
error={errors.email}
id="email"
label={t("signup-page.label-email")}
name="email"
onChange={handleChange}
inputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton aria-label="toggle password visibility">
<EmailIcon />
</IconButton>
</InputAdornment>
),
maxLength: 120,
}}
/>

在上面的代码中，adorment被忽略，但maxLength用作"inputProps" 骆驼大小写

下面的代码是一个工作示例，正如您可能看到的，我接受了它，就像在Form Control内的旧样式一样，输入标签和输入"outlinedInput

<FormControl variant="outlined" fullWidth>
<InputLabel htmlFor="firstName">Password</InputLabel>
<OutlinedInput
value={values.firstName}
autoComplete="outlined"
name="firstName"
variant="outlined"
required
fullWidth
error={errors.firstName}
id="firstName"
label={t("signup-page.label-firstname")}
onChange={handleChange}
autoFocus
inputProps={{ maxLength: 32 }}
/>
</FormControl>

溶液。我的最后一个建议是，使用OutlinedInput而不是TextField，这样您就可以以单独的方式Adorments并maxLength

下面是一个带有FormControlOutlinedInput、inputProps-maxLength和结束Adorment图标的工作示例

<FormControl variant="outlined" fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<OutlinedInput
value={values.passwordConfirm}
variant="outlined"
required
fullWidth
error={errors.passwordConfirm}
name="passwordConfirm"
label={t("signup-page.label-password-confirm")}
type={values.showPasswordConfirm ? "text" : "password"}
id="password-confirm"
onChange={handleChange}
inputProps= {{maxLength:32}}
endAdornment= {
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword("passwordConfirm")}
onMouseDown={handleMouseDownPassword}
>
{values.showPasswordConfirm ? (
<Visibility />
) : (
<VisibilityOff />
)}
</IconButton>
</InputAdornment>
}
/>
{errors.passwordConfirm && (
<p className="error"> {errors.passwordConfirm} </p>
)}
</FormControl>

如果您使用的是 MUI 5 版本5.0.6，由于对旧版的支持，您将不得不执行以下操作，

<TextField
id="standard-textarea"
label="A label"
placeholder="Some text here"
multiline
variant="standard"
defaultValue={"Hello"}
inputProps={{
maxLength: 255,
}}
InputProps={{
disableUnderline: true,
}}
/>

该TextField同时支持inputProps和InputProps，但有些属性反之亦然。

maxLength在InputProps中无法按预期工作，并且像 MUI 5 的disableUnderline这样的属性在inputProps中无法按预期工作。

小心可能的typo与i。

有关详细信息，请参阅 API，https://mui.com/api/text-field/。

接受的答案在 Firefox 中不适用于大数字(大于 16 位数字)。数字只是以一种奇怪的方式表现。

对于一个 22 长度的字段，我们最终使用了这个：

<TextField
required
validateOnBlur
field="cbu"
label="22 dígitos del CBU"
validate={validate.required}
type="text"
inputProps={
{maxLength: 22}
}
onInput={(e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') }}

基本上，文本字段的本机maxLength约束，以及"动态"从字符串到数字的转换。

起色

此外，您可能更愿意使其可重用且更具语义性。

# constraints.js
const onlyNumbers = (e) => { e.target.value = e.target.value.replace(/[^0-9]/g, '') };
# form.js
<TextField
field="cbu"
label="22 dígitos del CBU" 
inputProps={
{maxLength: 22}
}
onInput={(e) => onlyNumbers(e) }

材料设计<TextField />组件没有任何length属性。

您可以在onChange()方法中创建您的。

updateTextField(event,value){
if(value.length <= 12){
//Update your state
}
else{
//Value length is biggest than 12
}
}
<TextField
id="SigninTextfield"
label="Aadhaar number"
id="Aadhar"
lineDirection="center"
required={true}
type="number"
onChange={(e,v) => this.updateTextField(e,v)}
style={styles.rootstyle}
erorText="Please enter only 12 digits number"
/>

在你的更改处理程序中，只需编写。

if (event.target.value.length !== maxLength ) return false;

我遇到了类似的问题，但使用文本区域自动调整大小。不幸

inputProps={{ maxLength: 12 }}

不适用于文本区域自动调整大小。

以下解决方法适用于文本区域自动调整大小以及文本和数字。受到这个问题的公认答案的启发 - https://stackoverflow.com/a/49130234/5236534

onInput = {(e) =>{
e.target.value = (e.target.value).toString().slice(0,10)

import * as React from 'react';
import TextareaAutosize from '@mui/material/TextareaAutosize';
export default function MinHeightTextarea() {
return (
<TextareaAutosize
aria-label="minimum height"
minRows={3}
placeholder="Minimum 3 rows"
style={{ width: 200 }}
onInput = {(e) =>{
e.target.value = (e.target.value).toString().slice(0,10)
}}

/>
);
}

演示链接：限制 MUI 文本区域中的字符长度自动调整大小

<TextField
id="SigninTextfield"
label="Aadhaar number"
id="Aadhar"
lineDirection="center"
required={true}
type="number"
inputProps={{
maxLength: 20,
}}
style={styles.rootstyle}
erorText="Please enter only 12 digits number"
/>

对于仍在为数字字段寻找解决方案的人来说，这个解决方案对我来说效果很好。

onInput={(e: any) => {
e.target.value = Math.max(0, parseInt(e.target.value))
.toString()
.slice(0, 2);
}}

确保使用任何。

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
export default function BasicTextFields() {
const [num, setNum] = React.useState();
const limitChar = 12;
const handleChange = (e) => {
if (e.target.value.toString().length <= limitChar) {
setNum(e.target.value);
}
};
return (
<Box component="form">
<TextField
type="number"
id="outlined-basic"
label="Outlined"
variant="outlined"
onChange={(e) => handleChange(e)}
defaultValue={num}
value={num}
/>
</Box>
);
}

相关内容

最新更新

热门标签：