Как принимать в инпут только в форме: месяц/год

Question

Можете подсказать как принимать в инпут значения в формате: месяц/год, например - 01/22, 03/25, 11, 28 и т.д Необходимо сделать запреть на все символы кроме "0-9" "/" - то есть: Первый символ 0 | 1(Если 0, второй символ 1-9; Если 1, второй символ 0-2) третий символ в любом случае "/", два последующих цифры от 0-99.

<input type="cardnumber" id="clientInputDate" maxlength="5">

Моя попытка: https://codepen.io/hodor72/pen/JjMKQeO

Решение:

  function validateDate(inp, show){
        let inpValid = inp.value.split("")
        switch (inpValid[0]){
            case "0":{
                if ( !parseInt(inpValid[1]) ) {
                    inp.value = inp.value.substring(0, 1)
                } 
                break;
            }
            case "1":{
                if(inpValid[1] > 2 || inpValid[1] % 1 !== 0){
                    inp.value = inp.value.substring(0, 1)
                }
                break;
            }
            default:{
                inp.value = inp.value.substring(0, 0)
            }
        }
        if(inpValid[2] !== "/"){
            inp.value = inp.value.substring(0, 2)
        }
        if(inpValid[3] % 1 !== 0){
            inp.value = inp.value.substring(0, 3)
        }
        if(inpValid[4] % 1 !== 0){
            inp.value = inp.value.substring(0, 4)
        }
        show.textContent = inp.value;
        if(show.textContent.length == 0){
            show.textContent = '01/23'
        }
    }

Answer 1

Вот моё решение.

<input type="cardnumber" id="clientInputDate" maxlength="5" value="--/--">


function isNumByKeyCode(keyCode) {
    //проверим код символа, 0 = 48, 9 = 57, так и узнаем является ли числом
    return 48 <= keyCode && keyCode <= 57;
}

function replaceAt(str, position, value) {
    return str.substring(0, position) + value + str.substring(position+1)
}

function onKeyDownEventHandler(info) {
    const keyCode = info.keyCode;
    const value = input.value;
    const isNum = isNumByKeyCode(keyCode);
    
    
    // Из-за того, что могут ввести пользователи всякий мусор
    // Мы просто обновляем значение в поле ввода самым прямым способом
    // Проходимся циклом и если есть число - копируем его, если не число - то символ пропуска
  let newStr = '';  
    for(i = 0; i < 5; i++) {
        if (i === 2) newStr += '/';
        else if(!isNumByKeyCode(value.charCodeAt(i))) {
            newStr += '-';
        }
        else newStr += value.charAt(i);
    }
    
    // обновляем поле ввода, чтобы оно всегда имело нужный вид
    input.value = newStr;

    const idx = input.value.indexOf('-');   
    
    // Если ввели не число или поле уже заполнено, то выходим из функции
    if (!isNum || idx === -1) return;
    
    // Теперь если ввели число, то меняем значение
    const num = info.key;
    input.value = replaceAt(input.value, idx, num);

}


const input = document.querySelector('#clientInputDate');
input.addEventListener("keydown", onKeyDownEventHandler);

БЛОГ НА HUSL

Как принимать в инпут только в форме: месяц/год

Ответы (1 шт):