Еще показать DIV, когда текстовое поле/вход ONBLUR/теряет фокус

Question

поэтому я стараюсь, чтобы скрыть/показать DIV элемент с помощью OnFocus и ONBLUR:

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

Это прекрасно работает, но проблема в том, что DIV снова прячется когда в textarea/input больше нет фокуса.

Целый код: JSFIDDLE link.
Вы можете увидеть, что вы не можете проверить флажок или выбрать текст.

Что я могу сделать, чтобы по-прежнему отображать элемент div, когда textarea потерял фокус или чтобы текстовая область все еще имела фокус, когда я нажал на div?

Извините, но я новичок в Javascript.

Спасибо заранее,
Philipp

Answer 1

Этот вопрос не является тривиальным, но, по словам 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/

Answer 2

Добавляя очень короткую задержку (SetTimeout) на действия размытия флажок работает. Например:

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

Вот updated jsfiddle.