我有一个textarea,如果用户点击它,它应该被隐藏,并且如果他在textarea内部点击,它仍然可见。
问题在于,当用户选择textarea的文本并将鼠标放在它外面时,textarea会被隐藏,他不能再复制文本了。
我该如何解决这个问题?
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;
}
答案 0 :(得分:3)
只需使用mousedown()
事件
答案 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();
});