Oi, eu queria saber se existe uma propriedade para definir o comprimento máximo da entrada de texto para que quando o usuário inserir uma certa quantidade de letras, ele não será capaz de inserir mais?
Muito obrigado!
Ei @xuansehyun , você só deve ser capaz de definir o atributo maxLength
em seu elemento TextField
assim:
<TextField
style={styles.textfield}
hintText="Hint Text (MultiLine)"
multiLine={true}
maxLength="2" />
Deixe-me saber se isso não funcionar.
Funciona para mim, você pode fechar isso, eu acho :)
@otroboe eu concordo.
como posso adicionar erro de validação se o comprimento mínimo for menor que o comprimento mínimo definido
<div class="MuiFormControl-root-100" maxlength="2" style="display: block;">
<div class="MuiInput-root-104 SendAnnouncementFormComponent-textFieldTextRoot-90 MuiInput-formControl-105 MuiInput-multiline-111">
<textarea class="MuiInput-input-113 SendAnnouncementFormComponent-textFieldTextInput-92 MuiInput-inputMultiline-117" id="announcementText" name="text" placeholder="Update Text" type="text" rows="10" aria-required="false" aria-invalid="false"></textarea>
</div>
</div>
Eu tentei isso e não funcionou. O maxLength acabou em um div, não na textarea. Aqui está o meu código que gerou o HTML acima.
<TextField
InputProps={{
id: 'announcementText',
disableUnderline: true,
multiline: true,
rows: 10,
classes: {
root: textFieldTextRoot,
input: textFieldTextInput,
},
}}
maxLength="2"
name="text"
type="text"
value={this.state.text}
onChange={this.handleInputChange}
placeholder="Update Text"
style={{ display: 'block' }}
/>
"material-ui": "1.0.0-beta.30",
Atualização: descobri que posso fazer isso funcionar usando inputProps={{maxLength: 2}}
. O invólucro é importante. Não funciona em InputProps
Não há documentação sobre maxLength diretamente em um TextField
.
Também estou tendo problemas para fazer isso funcionar com os betas e, definitivamente, parece que deve ser uma propriedade diretamente na API do componente.
@JarLowrey respondeu aqui: https://github.com/mui-org/material-ui/issues/5309#issuecomment -355462588
Para a referência, menciono isso aqui também. Para limitar o número de comprimento de entrada 'por exemplo, 10' em [email protected]
, tente este código:
<TextField
inputProps={{
maxLength: 10,
}}
/>
Observe que InputProps
e inputProps
são duas propriedades diferentes de TextField. Esse fato desperdiçou algumas horas da minha vida.
<TextField
InputProps={{
disableUnderline: true
}}
inputProps={{
maxLength: 10
}}
/>
Observe que
InputProps
einputProps
são duas propriedades diferentes de TextField. Esse fato desperdiçou algumas horas da minha vida.<TextField InputProps={{ disableUnderline: true }} inputProps={{ maxLength: 10 }} />
Da mesma forma, a propriedade de comprimento mínimo também funciona certo?
@kenecaswell obrigado pelos posts, acabei de passar uma hora tentando descobrir o que estava fazendo de errado.
@kenecaswell Você acabou de salvar uma vida 👍 Obrigado mano !!
Se houver type = 'number', maxLength não funcionará
inputProps = {{
maxLength: 10,
}}
/>
Deveria ser:
maxLength: 10,
}}
/>
Uma solução melhor sem nenhum atributo (caso não funcione).
Em seu TextField
's onChange()
, atualize seu estado apenas se o comprimento do valor for igual a <YOUR_MAX_LENGTH>
.
onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>
if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}
Uma solução melhor sem nenhum atributo (caso não funcione).
Em seuTextField
'sonChange()
, atualize seu estado apenas se o comprimento do valor for igual a<YOUR_MAX_LENGTH>
.
onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>
if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}
OnChange nunca é uma solução melhor, pois ainda dispara o evento mesmo depois que o limite é atingido, pode parecer nada com a CPU moderna, mas devemos projetar nossos sistemas para impor restrições no nível de HTML, se possível. maxLength é um atributo HTML e compatível com vários navegadores, mesmo sem JavaScript
inputProps={{ maxLength: 365 }}
funciona para mim.
No caso de você estar usando formik-material-ui
o caminho a seguir será:
<Field
component={TextField}
InputProps={{
inputProps: { maxLength: 5 },
}}
/>
Eu quero usar type='number'
, então a única solução para mim é usar substring
em setState
parte.
Exemplo:
const [deposit, setDeposit] = React.useState<number | null>(null);
const disabled = deposit == null || deposit < 0 || deposit === 0;
return (
<TextField
variant='outlined'
color='primary'
fullWidth
type='number'
value={deposit}
onChange={(e) => setDeposit(Number(e.target.value.substring(0, 6)))} // This line to limit the length!
label='Deposit'
InputProps={{
endAdornment: (
<InputAdornment position='end'>
<Button
variant='text'
disabled={disabled}
color={'primary'}
onClick={(_) => onSend(deposit!)}>
<Typography color='primary'>{'Submit'}</Typography>
</Button>
</InputAdornment>
)
}}
/>
Comentários muito úteis
Observe que
InputProps
einputProps
são duas propriedades diferentes de TextField. Esse fato desperdiçou algumas horas da minha vida.