如果用户在其外部单击,则隐藏textarea,但在选择文本后将鼠标留在其外部时保持可见

时间:2013-05-09 11:24:58

标签: jquery html

我有一个textarea,如果用户点击它,它应该被隐藏,并且如果他在textarea内部点击,它仍然可见。

问题在于,当用户选择textarea的文本并将鼠标放在它外面时,textarea会被隐藏,他不能再复制文本了。

我该如何解决这个问题?

Live JSFiddle

HTML:

<span>Show textarea</span>

<div>
    <textarea>Text in textarea</textarea>
</div>

Jquery的:

$("span").on("click", function () {
    $("textarea").show();
});


$(document).mouseup(function (e) {
    var container = $("div");

    if (container.has(e.target).length === 0) {
        $("textarea").hide();
    }
});

CSS:

textarea {
    position:absolute;
    right:10px;
    bottom:10px;
    display:none;
}

3 个答案:

答案 0 :(得分:3)

只需使用mousedown()事件

Fiddle

答案 1 :(得分:1)

更全面的证据(检查鼠标是否在外面并在鼠标上方隐藏),但需要优化: http://jsfiddle.net/YqJ48/

(function() {

$("span").on("click", function () {
    $("textarea").show();
});

var wasDown = false;

$(document).mousedown(function (e) {
    wasDown = false;
    var container = $("div");

    if (container.has(e.target).length === 0) {
        wasDown = true;
    }
});

$(document).mouseup(function (e) {
    var container = $("div");

    if (wasDown && container.has(e.target).length === 0) {
        $("textarea").hide();
    }
});

})()

编辑:如果您不想取消隐藏,只需使用:

$("span").on("click", function () {
    $("textarea").show();
});

$(document).mousedown(function (e) {
    var container = $("div");

    if (container.has(e.target).length === 0) {
        $("textarea").hide();
    }
});

答案 2 :(得分:0)

试试这个:

<强> HTML

<span>Show textarea</span>

<div id="backGround">
    <textarea>Text in textarea</textarea>
</div>

<强>的jQuery

$('#backGround').click(function () {

 $("textarea").hide();   

});