Здравствуйте!
Есть форма из трех инпутов (дд.мм.гг)
Подскажите пожалуйста, как сделать автопереход на след. инпут без нажатия TAB..то есть, человек ввел две цифры, и фокус сместился на следующий инпут..
Вот код моей формы:
<Grid container alignItems="flex-end" spacing={3} wrap="nowrap">
<Grid item>
<Text color="#656C91">{t`Day`}</Text>
<TextMaskField
name={`${name}.day`}
mask={[/\d/, /\d/]}
autoComplete="off"
showHelper={false}
maxLength="2"
onKeyUp={focusChange}
placeholder="XX"
/>
</Grid>
<Grid item>
<span className={classes.spacer}>{'/'}</span>
</Grid>
<Grid item>
<Text color="#656C91">{t`Month`}</Text>
<TextMaskField
name={`${name}.month`}
mask={[/\d/, /\d/]}
autoComplete="off"
showHelper={false}
maxLength="2"
innerRef={firstNameRef}
// onKeyUp={focusChange}
placeholder="XX"
/>
</Grid>
<Grid item>
<span className={classes.spacer}>{'/'}</span>
</Grid>
<Grid item>
<Text color="#656C91">{t`Year`}</Text>
<TextMaskField
name={`${name}.year`}
mask={[/\d/, /\d/, /\d/, /\d/]}
autoComplete="off"
showHelper={false}
placeholder="XXXX"
/>
</Grid>
</Grid>
Пытаюсь что-то такое сделать - только сам фокус не могу прикрутить((...
const focusChange = () => {
if (field.value.day.length >= 2) {
// field.value.nextElementSibling.focus();
firstNameRef.focus();
// eslint-disable-next-line no-console
console.log('YEES');
}
// console.log(field.value.day.length, 'YEES');
};
