当textarea /输入onblur /失去焦点时仍然显示div [英] Still show div when textarea/input onblur / loses focus
问题描述
< textarea onfocus =文档 。.getElementById（ 'divID1'）的style.display = '块';的onblur =的document.getElementById（ divID1’ ）的style.display =无;>< / textarea的>
< div id =divID1>
这可以正常工作，但问题在于当textarea / input没有已经有了焦点。
这是整个代码： JSFIDDLE链接。
您可以看到您无法选中复选框或选择文本。
我还可以做什么来显示当textarea失去焦点时div元素或者当我点击div时让textarea仍然有焦点？
很抱歉，我是Javascript新手。
预先感谢，
$ b $这个问题不是微不足道的，而是根据 / 121499 / when-onblur-how-can-i-find-out-which-element-focus-go-to / 124560＃124560>这个答案，它可以通过以下方式解决：
HTML
$ b
< textarea id =example1onfocus =focushandler（'divID1'）;>< / textarea>
< br />
< br />
< div id =divID1>
< p>这个div是蓝色的< / p>
< br />
< input type =checkbox/>复选框A
< / div>
< div id =divID2>
< p>这个div是绿色的< / p>
< br />
< input type =checkbox/>复选框B
< / div>
Javascript
< pre class =lang-js prettyprint-override> var current = null; //当前显示div - divID1或divID2
function focushandler（id）{
if（current！== null）{
current.style.display ='none';
}
var div = document.getElementById（id）;
div.style.display ='block';
current = div;
函数clickhandler（e）{
if（current == null）{//如果两个div都是隐藏的
return;
}
e = e || window.event; //用于IE8,7兼容性
var t = e.target || e.srcElement; //点击元素
var sig = false;
//现在检查所有父母
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）{//用于IE8-7兼容性
document.documentElement.attachEvent（'onclick'，clickhandler）;
}
JSFiddle ： http： //jsfiddle.net/PfQfN/4/ （适用于Firefox，Chrome，IE7-10，Safari和Opera）。或者你也可以使用这个修改后的代码： http://jsfiddle.net/PfQfN/6/（效果是相同的）。
更新后的CSS：根据此非常有用的答案，这些元素可以更好地定位，如此小提琴中所示： http://jsfiddle.net/PfQfN/9/
so I try to hide/show a div element with using onfocus and onblur:
<textarea onfocus="document.getElementById('divID1').style.display='block';" onblur="document.getElementById('divID1').style.display='none';"></textarea>
<div id="divID1">
This works fine, but the problem is that the div hides again when the textarea/input doesn't have focus anymore.
This is the whole code: JSFIDDLE link.
You can see that you can't check the Checkbox or select text.
What can I do to still display the div element when the textarea lost focus or to make the textarea still having focus when I clicked on the div?
Sorry, but I'm new to Javascript.
Thanks in advance,
Philipp
This question is not trivial, but according to this answer, it can be solved in the following way:
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/ (works good with Firefox, Chrome, IE7-10, Safari and Opera). Or alternatively you can use this a bit modified code: http://jsfiddle.net/PfQfN/6/ (the effects are the same).
Updated CSS: And according to this very useful answer, those elements can be positioned better as shown in this fiddle: http://jsfiddle.net/PfQfN/9/
这篇关于当textarea /输入onblur /失去焦点时仍然显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
