@ariss10

Как сделать такой инпут?

Мне нужно сделать такой Input:
5fdf0b6faf58c084389242.png

Суть в том, что после ввода второй цифры в этом инпуте появляется "/"
А если стирать текст, то "/" пропадает.

Я пробовал сделать, но у меня не получилось. А когда гуглил, выбивало только библиотеки для решения этой задачи, а лишние библиотеки не хочется подгружать на сайт(

Мой вариант:
// Input Selector
const expiryDateInput = document.querySelector('#expiry_date');

expiryDateInput.addEventListener('input', function() {
    let inputValue = expiryDateInput.value;

    if(inputValue.length >= 2 && inputValue.length < 3) {
        expiryDateInput.value = `${inputValue}/`;
    }
});
  • Вопрос задан
  • 175 просмотров
Пригласить эксперта
Ответы на вопрос 4
KorniloFF
@KorniloFF Куратор тега JavaScript
Работаю по font-end / JS
const expiryDateInput = document.querySelector('#expiry_date');

expiryDateInput.addEventListener('input', function() {
    let inputValue = this.value;

    if(inputValue.length >= 2) {
        this.value = this.value.replace(/^([^\/]{2})([^\/])/,'$1/$2');
    }
});
Ответ написан
Seasle
@Seasle Куратор тега JavaScript
\( ゚ヮ゚)/
Вариант 1 - использовать imask.js.
Вариант 2

Возможно код немного многословен, но валидирует введенные данные.
Ответ написан
@Azperin
Дилетант
Ну и мой вариант в догонку
document.getElementById('expiry_date').addEventListener('input', (ev) => {
	let separator = ' / ';
	ev.target.value = ev.target.value.replace(separator,'');
	if (ev.target.value.length > 2) {
		ev.target.value = ev.target.value.split('').reduce((a, v, i) => {
			return a + v + (i === 1 ? separator:'');
		}, '');
	};
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽