How to determine when focus leaves an HTML form (i.e. no child of the form has focus anymore)?

For example, I have an HTML form element with a textarea, and two buttons as child elements. How can I detect when the focus goes from one of those three elements, to an element OTHER THAN one of those three. In other words, how do I detect when focus leaves the form, so I can dismiss it automatically?

I th开发者_运维百科ought I could use the focusout event on the form to figure out when focus no longer belonged to one of its child elements, but the object gaining the focus doesn't seem to be accessible from the focusout event, so I have no way to checking whether focus is just going from the textarea to one of the buttons, for example.

The relatedObject, fromElement, and toElement properties are all undefined.

While i fear this approach may have subtle errors, it's the best i know of:

• register on the form's focusout event (not blur, because the latter does not bubble)
• register a 0-delayed function via setTimeout, so the focus transfer is handled
• in the timeouted function, check if document.activeElement is a descendent of your form. If not, fire.

Here is a example implementation:

$('#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'>

const form = document.querySelector(".myform");

document.onclick = () => {

  // query selecting the form element and checking for the
  // css :focus pseudo class inside the form element
  if (!form.querySelector(":focus")) {
  
    // this console log would run when any placeholder in the form is not focused 
    console.log("form dismissed.")
  }
}

.myform {
  padding: 10px;
  background: blueviolet;
  color: #fff;
}
.myform * {
  display: block;
  margin: 5px 0;
}

<form class="myform">
  when not selecting the placeholders this will log a msg to the console
  <input value="select here" type="text"/>
  <input value="select here" type="text"/>
  <textarea>Select here</textarea>
  <button>Submit</button>
</form>

As you noticed in the snippet above you could use the element.querySelector(":focus") to check whether the contents of the form has focus or not. This approach completely works fine.

( vote if you found this answer useful to you )

correct name is "blur"

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(); }

this will do the trick

you can do it also for textarea just apply document.getElementByTagname('textarea') and loop through array.