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

Question

[ariss10]

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


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

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

Мой вариант:

// 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}/`;
    }
});

Answer 1

[Павел Корнилов]

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');
    }
});

Comments

[Евгений]

самый простой способ, но пишут что он еще не в стандарте...

[Пашенька]

Евгений, в смысле не в стандарте? Этот код пойдёт даже в IE9 (за исключением const, который безболезненно заменяется на var).

[Евгений]

Пашенька, ааа, я перепутал с другим))) это же вы на значение))

[Евгений]

Пашенька,
https://developer.mozilla.org/ru/docs/Web/JavaScri...

С этим, не проснулся видимо))))) читал недавно xD

[Евгений]

expiryDateInput.addEventListener('keydown', (e) => {
    if(e.target.value.length === 4 && e.keyCode === 8) {
        e.target.value = e.target.value.substring(0, 3)
    }
})

доделал на удаление слеша))

Answer 2

[Александр]

Вариант 1 - использовать imask.js.
Вариант 2

Возможно код немного многословен, но валидирует введенные данные.

Answer 3

[Алексей]

Ну и мой вариант в догонку

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:'');
		}, '');
	};
});