Как изменить входное значение при вводе нового значения

#javascript

Вопрос:

У меня есть ввод с заполнителем =»ГГГГ / ММ», когда пользователь нажимает на ввод для ввода данных, я хочу, чтобы год и месяц исчезли, поэтому остается только «/».

Я уже пробовал со своим кодом, однако это не работает, пожалуйста, помогите/

 var birthdayId = "document.querySelector("#BIRTHDAY")";
if(birthdayId.maxlength < 4){
birthdayId.value = "/";
}

 <input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="YYYY/MM">

1. Вы захотите выполнить свою логику в focus прослушивателе событий

2. Это называется маской ввода. Есть плагины, которые это сделают.

3. @Taplar Как это сделать с помощью прослушивателя событий фокуса?

4. @Udzzzz Взгляните codepen.io/vyspiansky/pen/jOqmPxW

5. Почему у вас "document.querySelector("#BIRTHDAY")" в кавычках? Это делает его строковым литералом, он не вызывает функцию.

Ответ №1:

Запустите свой код в focus прослушивателе событий.

Вы должны проверять длину значения, а не maxlength свойство, которое никогда не меняется.

Не следует заключать вызов document.querySelector в кавычки.

Не устанавливайте значение ввода по умолчанию на YYYY/MM , поскольку это помешает тесту длины работать. Заполнитель используется для отображения желаемого формата, вам не нужно также делать это со значением.

 var birthdayId = document.querySelector("#BIRTHDAY");
birthdayId.addEventListener("focus", function() {
  if (birthdayId.value.length < 4) {
    birthdayId.value = "/";
  }
});

 <input type="text" id="BIRTHDAY" name="BIRTHDAY" placeholder="YYYY/MM" maxlength="7" value="">

1. Спасибо за ваш ответ, по какой-то причине, когда я тестирую ваш код, запускаю фрагмент кода, значение отключено или я не могу ввести какое-либо значение

2. Поскольку я заполняю значение 7 символами, оно имеет максимальную длину. Вы должны удалить символы, чтобы вы могли их заменить.

3. Я изменил его, чтобы просто инициализировать ввод с помощью / , как в вашем коде. Но теперь вы не можете видеть, сколько цифр должно быть по обе стороны от / .

4. Для создания реальной маски потребуется гораздо более сложный код, и я бы не стал этого делать без плагина. Поскольку вы сказали, что не можете использовать плагин, вы не получите его здесь.