Холодный вызов функции blur() в JavaScript

у меня есть линия

document.getElementById("firstName").addEventListener("blur", validateField);

и :

validateField = (event) =>
{
    const el = event.target;
}

Теперь я хочу вызвать функцию validateField() с соответствующим элементом в строке form.addEventListener('submit', function(event).

document.getElementById("firstName").blur(); // This is not getting called.

Но холодный вызов blur() не работает.

То, что я пытаюсь сделать, это заполнить сообщение о недопустимости начальной загрузки, когда форма вызывается и все еще недействительна.

el.classList.add('is-invalid');
el.nextElementSibling.innerHTML = "This field is required";

Пытаюсь избежать jQuery, так как я могу переключиться на загрузочную версию 5.

Пожалуйста, предоставьте минимальный воспроизводимый пример . Судя по вашему описанию, это должно работать так, как ожидалось: jsfiddle.net/w69fnmL0 Либо форма отправляется через щелчок, и событие размытия срабатывает перед отправкой, либо оно отправляется «неявно» (например, при нажатии Enter во вводе ) и в этом случае вызов .blur() вызовет синхронное срабатывание события размытия.

— 23.12.2020 08:56

javascript bootstrap-4

23.12.2020 08:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я действительно думаю, что технически отправка формы не фокусируется, если пользователь не нажимает клавишу ввода для отправки. Альтернативный подход, возможно, заключается в том, что вы можете попытаться сосредоточиться на чем-то другом, а не на размытии конкретной вещи!

Следующий код работает для меня.

document.getElementById("frm").addEventListener('submit', function(event) {
  event.preventDefault();
  document.getElementById("firstName").blur();
});

<form action = "" id = "frm">
  <input type = "text" id = "firstName" />
  <input type = "submit" value = "Press Enter" />
</form>

Но для альтернативного решения:

document.getElementById("frm").addEventListener('submit', function(event) {
  event.preventDefault();
  document.getElementById("frm").focus();
});

#frm:focus {
  outline: none;
  box-shadow: none;
}

<form action = "" id = "frm" tabindex = "0">
  <input type = "text" id = "firstName" />
  <input type = "submit" value = "Press Enter" />
</form>

23.12.2020 08:21

Другие вопросы по теме

Добавить или удалить строку во входной таблице

Spinner не отображается в bootstrap 4.0.0

Ссылки меню My Bootstrap работают на мобильных устройствах

«overfow-x: hidden» не работает на мобильных устройствах

Содержит более крупный текст в строке таблицы

Как я могу сделать тег H1 отзывчивым?

Как свернуть другие меню при нажатии на переключатели в бутстрапе

Javascript добавил несколько элементов Bootstrap Select, которые не работают

Как показать 3 карты подряд в системе Bootstrap Grid

Почему мое изображение не отображается в модальном окне?

Холодный вызов функции blur() в JavaScript

Ответы 1

Другие вопросы по теме

Похожие вопросы