Я беру от пользователя номер карты и хочу, чтобы длина, введенная пользователем, была не меньше и не больше 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 или любой обработчик событий для ограничения длины.
5 ответов
Я нашел другое решение здесь.
<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)
}}/>
Принятый ответ не будет работать в 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"
/>
<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}}
/>
Вы можете установить свойство maxLength
для ограничения текста в текстовом поле.
Вместо метода onChange
вы можете передать maxLength
inputProps
опорам material-ui
TextField
.
<TextField
required
id="required"
label="Required"
defaultValue="Hello World"
inputProps={{ maxLength: 12 }}
/>
По сути, мы можем редактировать все собственные атрибуты входного элемента через объект inputProps
.
Ссылка на TextField Api
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.