Как определить, когда фокус покидает HTML-форму (то есть ни один дочерний элемент формы больше не имеет фокуса)? - PullRequest
Новая
       16

Как определить, когда фокус покидает HTML-форму (то есть ни один дочерний элемент формы больше не имеет фокуса)?

2 голосов
/ 10 августа 2011

Например, у меня есть элемент формы HTML с текстовой областью и две кнопки в качестве дочерних элементов.Как я могу определить, когда фокус переходит от одного из этих трех элементов к элементу ДРУГОЙ, чем один из этих трех.Другими словами, как мне определить, когда фокус покидает форму, чтобы я мог отклонить его автоматически?

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

Свойства relatedObject, fromElement и toElement все не определены.

Ответы [ 2 ]

1 голос
/ 20 марта 2015

Хотя я боюсь, что в этом подходе могут быть тонкие ошибки, лучше всего я знаю:

  • регистрируется в событии focusout формы (не blur, поскольку последний не всплывает)
  • зарегистрируйте функцию с задержкой 0 с помощью setTimeout, поэтому передача фокуса обрабатывается
  • в функции с указанием времени, проверьте, является ли document.activeElement потомком вашей формы.Если нет, огонь.

Вот пример реализации: 

$('#yourform').on('focusout', function(evt) {
  var self = $(this);
  setTimeout(function() {
    if (self.has($(document.activeElement)).length == 0) {
      alert('leave');
    }
  }, 0);
});
form {
  border: 1px solid red;
  margin: 1em;
  padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id='yourform'>
  <input type='text'>
  <input type='text'>
</form>


<input type='text'>
0 голосов
/ 10 августа 2011

правильное имя "размытие" 

function setBlur()
{
   var elements = document.getElementByTagName('input');
   for(var i = 0; i < elements.length; i++)
      elements[i].setAttribute('onfocus', 'callme(this)');
}
function callme(el)
{
   var _id = el.getAttribute('id');
   if(_id != "textarea_id' && _id != "button_1_id" && _id != "button_2_id")
        callYourMethodToHandleFocusOutsideYourForm();
}
body.onload = function() { setBlur(); }

это поможет

Вы можете сделать это также для текстовой области, просто примените document.getElementByTagname('textarea') и выполните цикл по массиву.

...