Следующая демонстрация покажет это поведение с использованием Chrome или Firefox:
Когда пользователь пытается ввести в <input>, <label>, который охватывает <input>, становится display:none.
Если событие начинается с <input>, это должно быть событие, которое теряет фокус (например, blur, focusout, change ...),Что бы это ни было, функция обратного вызова должна регистрировать в консоли два элемента:
called
<body></body> // как activeElement ошибка 452307
Firefox не запускается при событии blur, но это происходитпожар на событии input.В демоверсии есть пользовательская функция с именем: addListener(), которая может регистрировать несколько событий на одном узле.Эта функция регистрирует blur и input на <input>.
Демо
<html>
<head>
<style>
#box {
height: 500px;
width: 500px;
border: 1px solid red;
display: block;
position: relative;
}
</style>
</head>
<body>
<form id='form'>
<fieldset id='box'>
<input id='key' type="text" />
</fieldset>
</form>
<script>
var ui = document.forms[0].elements;
var box = ui.box;
var key = ui.key;
box.addEventListener('keydown', closeBox);
function closeBox(e) {
e.target.style.display = 'none';
}
addListeners(key, 'input blur', triggerOnExit);
function triggerOnExit(e) {
console.log('called');
console.log(document.activeElement);
}
function addListeners(node, list, callBack) {
list.split(' ').forEach(function(e) {
node.addEventListener(e, callBack);
});
}
</script>
</body>
</html>