bes,снала сделай фокус на инпут в блоке , а потом табом переключай
у меня сработает blur
<!DOCTYPE HTML>
<html>
<head>
<style>
#block {
width:200px;
height:200px;
border:4px solid red;
}
body {
border:2px solid black;
}
</style>
</head>
<body tabindex='-1'>
<div tabindex='-1' id='block'>
wereasrwer
<input type='text'>
<div>
<input type='text'>
</div>
</div>
<div id='inform'></div>
<input type='text'>
<script>
function _(selector) {//функия для удобства написания примера, копипастить не нужно:)
return document.querySelectorAll(selector)[0];
}
function Focus_and_Blur(opt){
var elem = opt.elem, focusForElem;
if (elem.addEventListener){
elem.addEventListener('focus' , onFocus,true);
document.addEventListener('focus',onDocumentFocus,true);
} else {
elem.onfocusin = onFocus;
document.onfocusin = onDocumentFocus;
}
function onFocus(e) {
focusForElem = true;
event.cancelBubble = true;
opt.focus.call(this,e);
}
function onDocumentFocus (e) {
if (focusForElem) {
focusForElem = false;
opt.blur.call(elem,e)
}
}
};
//пример вызова, в саму функцию лучше не лезть
Focus_and_Blur({
elem:document.getElementById('block'),
focus:function () {
_("#inform").innerHTML = 'focus on '+ this.id;
},
blur: function () {
_("#inform").innerHTML = 'blur '+ this.id;
}
});
</script>
</body>
</html>
а у тебя блок не скроется
<!DOCTYPE HTML>
<html>
<head> </head>
<body style='border:1px solid black;'>
<div>
<div>
<div id="div" style="position: fixed; top: 10px; left: 5px; outline-style: none; z-index: 100">
<a href="#">open</a>
<div style="display: none">
<input><br>
<input>
</div>
</div>
<div></div>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input type='text'>
<script>
window.onload = function () {
var div = document.getElementById('div');
div.onclick = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target == this.children[0]) {
var next = target.nextSibling.nextSibling;
if (next.style.display != 'block') {
next.style.display = 'block';
target.innerHTML = 'close';
div.nextSibling.nextSibling.style.cssText = 'position: fixed; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 99';
} else {
next.style.display = 'none';
target.innerHTML = 'open';
div.nextSibling.nextSibling.style.cssText = '';
}
}
}
div.nextSibling.nextSibling.onclick = function () {
div.children[1].style.display = 'none';
div.children[0].innerHTML = 'open';
this.style.cssText = '';
}
}
</script>
</body>
</html>