仍然顯示DIV時的textarea /輸入的onblur /失去焦點

所以我儘量隱藏/顯示div元素使用的onfocus和的onblur：仍然顯示DIV時的textarea /輸入的onblur /失去焦點

<textarea onfocus="document.getElementById('divID1').style.display='block';" onblur="document.getElementById('divID1').style.display='none';"></textarea> 
<div id="divID1">

這工作得很好，但問題是，股利再隱藏當textarea /輸入不再有焦點時。

這是整個代碼：JSFIDDLE link。
你可以看到，你不能選中複選框或選擇文本。

我能做些什麼來仍然顯示div元素，當文本域失去焦點，或使仍然有焦點，當我點擊了DIV textarea的？

很抱歉，但我是新來的JavaScript。

由於提前，
菲利普

來源

2013-08-28 philippmitzweip

我不明白，你想隱藏它的onblur，但保持顯示關閉焦點？ –

不，我想隱藏它，如果你點擊div或textarea外部。就像textarea和div一樣。 – philippmitzweip

這個問題不是小事，而是根據this answer，它可以通過以下方式解決：

HTML

<textarea id="example1" onfocus="focushandler('divID1');"></textarea> 
<br /> 
<textarea id="example2" onfocus="focushandler('divID2');"></textarea> 
<br /> 

<div id="divID1"> 
    <p>This div is blue</p> 
    <br /> 
    <input type="checkbox" />Checkbox A 
</div> 
<div id="divID2"> 
    <p>This div is green</p> 
    <br /> 
    <input type="checkbox" />Checkbox B 
</div>

的Javascript

var current = null; //currently shown div - divID1 or divID2 

function focushandler(id) { 
    if (current !== null) { 
     current.style.display = 'none'; 
    } 
    var div = document.getElementById(id); 
    div.style.display = 'block'; 
    current = div; 
} 

function clickhandler(e) { 
    if (current == null) { //if both divs are hidden 
     return; 
    } 
    e = e || window.event; //for IE8,7 compatibility 
    var t = e.target || e.srcElement; // clicked element 
    var sig = false; 
    // now check all parents 
    while (t) { 
     if (t === current || t.nodeName == 'TEXTAREA') { 
      sig = true; 
     } 
     t = t.parentNode; 
    } 
    if (sig) { 
     return; 
    } 
    current.style.display = 'none'; 
    current = null; 
} 

if (document.documentElement.addEventListener) { 
    document.documentElement.addEventListener('click', clickhandler, false); 
} else if (document.documentElement.attachEvent) { // for IE8-7 compatibility 
    document.documentElement.attachEvent('onclick', clickhandler); 
}

JSFiddle： http://jsfiddle.net/PfQfN/4/（作品很好機智h Firefox，Chrome，IE7-10，Safari和Opera）。或者你也可以使用這個有點修改後的代碼：http://jsfiddle.net/PfQfN/6/（效果是一樣的）。

更新CSS：而根據this very useful answer，這些元素可以更好地定位如本fiddle：http://jsfiddle.net/PfQfN/9/

來源

2013-08-28 23:53:59 Stano

太棒了！謝謝！ – philippmitzweip

謝謝，很高興它幫助！ ;-) – Stano

通過增加對模糊動作的複選框工作很短的延遲（setTimeout的）。例如：

setTimeout(function(){ 
document.getElementById('divID2').style.display='none'; 
}, 100);

下面是一個updated jsfiddle。

來源

2013-08-28 20:56:47

這很酷，但沒有辦法讓div始終存在，直到你點擊textarea或div的外部？ – philippmitzweip

仍然顯示DIV時的textarea /輸入的onblur /失去焦點

回答

相關問題