jquery - 如果用户在其外部单击，则隐藏文本区域，但在选择文本后鼠标离开它时使其保持可见

Question

我有一个textarea，如果用户在它外面点击它应该被隐藏，如果他在textarea里面点击它仍然可见。

问题是当用户选择 textarea 的文本并将鼠标离开它时，textarea 被隐藏，他无法再复制文本。

我怎样才能解决这个问题？

现场 JSFiddle

HTML：

<span>Show textarea</span>

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

查询：

$("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;
}

Answer 1

只需使用该mousedown()事件

小提琴

Answer 2

更完整的证明（检查鼠标按下是否在外面并隐藏鼠标向上），但需要优化：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();
    }
});

Answer 3

尝试这个 ：

HTML

<span>Show textarea</span>

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

jQuery

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

 $("textarea").hide();   

});