1

所以我尝试使用 onfocus 和 onblur 隐藏/显示 div 元素：

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

这很好用，但问题是当 textarea/input 不再有焦点时，div 会再次隐藏。

这是整个代码：JSFIDDLE 链接。
您可以看到您无法选中复选框或选择文本。

当 textarea 失去焦点时，我该怎么做才能仍然显示 div 元素，或者当我单击 div 时让 textarea 仍然具有焦点？

抱歉，我是 Javascript 新手。

在此先感谢，
菲利普

4

2 回答 2

0

通过在模糊操作上添加一个非常短的延迟（setTimeout），复选框可以工作。例如：

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

这是一个更新的 jsfiddle。

于 2013-08-28T20:56:47.467 回答
0

这个问题不是微不足道的，但是根据这个答案，可以通过以下方式解决：

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/（适用于 Firefox、Chrome、IE7-10、Safari 和 Opera）。或者你也可以使用这个稍微修改过的代码：http: //jsfiddle.net/PfQfN/6/（效果是一样的）。

更新的 CSS：根据这个非常有用的答案，这些元素可以更好地定位，如下所示： http : //jsfiddle.net/PfQfN/9/

于 2013-08-28T23:53:59.680 回答