Jquery: функция в .blur () формы, а не элементов - PullRequest
Новая
       17

Jquery: функция в .blur () формы, а не элементов

0 голосов
/ 07 мая 2018

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

Вот код моей основной концепции: 

$(document).ready(function(){
    $("form").blur(function(){
        alert("This form has lost its focus.");
    });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>

<form>
Enter your name: <input type="text">
Enter your age: <input type="text">
</form>
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>

</body>
</html>

Если вместо этого оператор .ready фокусируется на «вводе», он отлично работает , но полностью не отвечает, когда я хочу, чтобы документ отслеживал всю форму. Есть идеи? Спасибо!

1 Ответ

0 голосов
/ 07 мая 2018

Событие, которое вы ищете, это не blur, а focusout. Если мы свяжем событие focusout с самой формой, обработчик будет вызываться всякий раз, когда фокус теряется на каком-либо элементе внутри формы.

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

Отсюда tabindex

Глобальный атрибут tabindex указывает, можно ли сфокусировать его элемент, и если / где он участвует в последовательной навигации по клавиатуре (обычно с клавишей Tab, отсюда и название). Он принимает целое число в качестве значения, с различными результатами в зависимости от значения целого числа:

  • Отрицательное значение (обычно tabindex = "- 1") означает, что элемент должен быть фокусируемым, но не должен быть доступным с помощью последовательной навигации по клавиатуре. В основном полезно для создания доступных виджетов с помощью JavaScript.

Как видите, любой элемент может получить фокус. Просто некоторые элементы будут получать фокус по умолчанию (якоря, входы, кнопки и т. Д.), Не устанавливая для них tabindex. В приведенном ниже примере, если вы нажмете на текст «Введите свое имя», вы увидите, что сама форма получает фокус. Затем вы можете перейти к входам, затем div и, наконец, span. Все они получают фокус по очереди. 

$('#theForm').on('focusout', function(e) {
  // do what you want/need to do here
  console.log('Form has lost focus');
});
#theDiv {
  height: 50px;
  width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="theForm" tabindex="1">
Enter your name: <input type="text" tabindex="2">
Enter your age: <input type="text" tabindex="3">
</form>
<div id="theDiv" tabindex="4"></div>
<span tabindex="5">Some Text</span>
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>
...