0

子要素の focusout で div を非表示にしたい。たとえば、

ユーザー名とパスワードのフィールドを 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 とテキスト フィールドの両方に onblur を配置しようとしましたが、共通の関数呼び出しが必要で、そこから要素のいずれかにまだフォーカスがあるかどうかを確認し、div のみを非表示にする必要があります。これを行う方法。

これを純粋な 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 に答える