0

我想在其子元素的focusout上隐藏一个div。说，

让用户名和密码字段在 div 中，最初将被最小化，用户将单击打开 div，然后如果用户单击 div 外的任何位置应关闭mydiv 

<body>

<div id="mydiv" onblur="alert('hi');" tabindex="1" style="border: 1px solid black;">click off me to activate onblur
    <br/>
    username: <input type="text" name="username" onblur="alert('hi');" tabindex="1" />
    <br/>
   Password: <input type="text" name="password" />

    </div>
</body>

（见 JS 小提琴：http: //jsfiddle.net/vC7Rb/1/）

我尝试为 div 和 text 字段设置 onblur 但这需要公共函数调用，我需要从中检查是否有任何元素仍然具有焦点，然后只隐藏 div.thats 似乎太多了，所以有什么简单的方法来做到这一点。

我想用纯 javascript 代码实现它，它应该在所有浏览器（IE、firefox、chrome）中兼容。

4

1 回答 1

0

通常，您会询问如何检测元素外的点击。这个问题在这里被问到并得到很好的回答。此外，这里是一个小提琴，展示了如何使用您的用例很好地处理隐藏和重新显示。我真正添加的唯一一件事是显示您用于重新显示用户名/密码 div 的任何按钮/方法都需要使用相同类型的 event.stopPropagation() 以避免重新隐藏您要显示的内容。

HTML：

<button onclick="document.getElementById('loginContainer').style.display='block';event.stopPropagation();">Show Login</button>
<div id="loginContainer" onclick="containerClicked(event)" style="border:1px solid black">
    <div><span>User Name:</span><input id="username" /></div>
    <div><span>Password:</span><input id="password" type="password"/></div>
</div>
<div style="border:1px solid red">Some other div on document</div>

JS：

document.onclick = function(){
    console.warn('doc clicked');
    document.getElementById('loginContainer').style.display = 'none';
}
function containerClicked(ev)
{
    console.warn('clicked');
    ev.stopPropagation();
}
于 2013-03-13T16:45:47.927 回答