当textarea /输入onblur /失去焦点时仍然显示div

本文介绍了当textarea /输入onblur /失去焦点时仍然显示div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ < 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 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>Javascriptvar current = null; //currently shown div - divID1 or divID2function 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！