jquery - Hide textarea if user clicks outside it, but keep it visible on mouse leave outside it after selecting the text -

i have textarea should hidden if user clicks outside it, , remains visible if clicks inside textarea.

the problem when user selects text of textarea , leaves mouse outside it, textarea gets hidden , cannot copy text anymore.

how can fix this?

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; } 

just use mousedown() event instead

fiddle