Ik neem een invoer van de gebruiker van het kaartnummer en wil dat de lengte die door de gebruiker wordt ingevoerd niet kleiner en groter is dan 12. Hier is de verklaring van mijn tekstveld.
<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"
/>
Nu begrijp ik niet of ik javascript of een gebeurtenishandler moet gebruiken om de lengte te beperken.
Antwoord 1, autoriteit 100%
U kunt de eigenschap maxLengthinstellen om de tekst in het tekstvak te beperken.
In plaats van de onChangemethode kun je maxLengthdoorgeven aan de inputPropsprops van material-uiTextField.
<TextField
required
id="required"
label="Required"
defaultValue="Hello World"
inputProps={{ maxLength: 12 }}
/>
In principe kunnen we de native attrs van alle invoerelementen bewerken via het inputProps-object.
Link naar TextFieldApi
Antwoord 2, autoriteit 18%
Ik heb hiereen andere oplossing gevonden.
<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)
}}/>
Antwoord 3, autoriteit 8%
<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>
),
}}
/>
Antwoord 4, autoriteit 5%
<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}}
/>
Antwoord 5, autoriteit 4%
Is het vermeldenswaard dat de component Material-ui <TextField />geen eigenschap maxLengthheeft. De originele html <input>doet dat echter wel. U hoeft dus niet echt een extra functie aan te maken om dit te laten werken. Gebruik gewoon de basis <input>-attributen met behulp van inputProps.
Het eigenlijke antwoord is dit:
inputProps={
{maxLength: 22}
}
// Result => <input maxlength="yourvalue" />
Wat dit doet, is dat het het kenmerk maxLengthvan de onderliggende <input>instelt, wat resulteert in: <input maxlength="yourvalue" />. Een ander belangrijk ding om op te merken is dat je inputPropsgebruikt en niet inputProps. Degene die u target is de kleine letter inputProps.
Antwoord 6, autoriteit 3%
Ik heb iets vreemds ontdekt in het gedrag tussen TextFielden INPUTvan Material UI
Ze lijken erg op elkaar, het probleem dat ik zie is het volgende:
Als u in de component TextField InputProps met hoofdletter "I"gebruikt, worden de versieringen weergegeven, maar aan de andere kant als u het gebruikt als kleine letters “inputProps“, wordt het maxLengthHtml-kenmerk TAKEN als valid, maar niet de Adorments
Ik heb uiteindelijk INPUTgebruikt in plaats van een TextFieldzodat je Adormentskunt gebruiken in
<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,
}}
/>
in de bovenstaande code wordt de adormentgenegeerd, maar maxLengthwordt gebruikt als “inputProps” kameelhoes
De onderstaande code is een werkend voorbeeld, zoals je zou kunnen zien, ik heb het omarmd zoals in de oude stijl binnen een Form Control, het invoerlabel en de invoer “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>
Oplossing. Mijn laatste aanbeveling, gebruik een OutlinedInputin plaats van een TextField, zodat je Adormentsen ook maxLength
Hieronder een werkend voorbeeld met FormControlOutlinedInput, inputProps– maxLengthen een einde AdormentIcoon
<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>
Antwoord 7
Het geaccepteerde antwoord werkt niet in Firefox voor grote getallen (groter dan 16 cijfers). Numbers gedraagt zich gewoon op een rare manier.
Voor een veld van 22 lengte hebben we dit uiteindelijk gebruikt:
<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, '') }}
/>
Kortom, native maxLength-beperking voor tekstvelden, plus een conversie van tekenreeks naar getallen “on-the-fly”.
Verbetering
Misschien geeft u er ook de voorkeur aan dit herbruikbaar en semantischer te maken.
# 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) }
Antwoord 8
De component material-design <TextField />heeft geen eigenschap length.
U kunt de uwe maken met de methode 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"
/>
Antwoord 9
In je change handler, schrijf gewoon.
if (event.target.value.length !== maxLength ) return false;
Antwoord 10
Als je MUI 5, versie 5.0.6gebruikt, moet je vanwege ondersteuning voor legacy zoiets als dit doen,
<TextField
id="standard-textarea"
label="A label"
placeholder="Some text here"
multiline
variant="standard"
defaultValue={"Hello"}
inputProps={{
maxLength: 255,
}}
InputProps={{
disableUnderline: true,
}}
/>
Het TextFieldondersteunt zowel inputPropsals inputProps, maar sommige eigenschappen werken omgekeerd niet.
maxLengthwerkt niet zoals verwacht in inputProps, en een eigenschap zoals disableUnderlinevoor de MUI 5 werkt niet zoals verwacht in inputProps.
Wees voorzichtig met een mogelijke typomet de i.
Zie de API voor meer informatie, https://mui.com/api/text-field /.