hide textarea field when not in focus

Question

I want to create a function that can hide a <textarea> field when I click at another place. This means that the <textarea> field will hide, and the word(s) inside the <textarea> will remain.

You can view an example on the Mapmarker National Geographic , by clicking on the text button on the left side, writing a message and then click away from the textarea (see below).

Here is my current code:

 textarea { background-image: none; } .textlabel-textarea { width: 200px; font-size: inherit!important; color: inherit!important; } .textlabel-text { width: auto; min-width: 200px; max-width: 500px; white-space: nowrap; } .hidden { display: none; } 

 <textarea class="textlabel-textarea rows=" 2 "" [hidden]="!tab1"></textarea <div class="textlabel-text" [hidden]="!tab2"></div> 

Answer 1

This cannot be done with plain CSS, instead it requires Javascript.
I utilized jQuery below by simply creating a new <div> with the value (contents) of the <textarea> when you click outside the <textarea> .

 $(document).on('click', function (e) { $('textarea').hide(); $('textarea').after("<div class='text'>" + $('textarea').val() + "</div>"); $(this).unbind("click"); }); $('textarea').on('click', function(e) { e.stopPropagation(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <textarea></textarea> 

---

Updated version:

Since OP commented and said it does need to be editable, and only using HTML and CSS, here is a (much less prettier) version that answers the question:

 textarea:focus { border: 1px solid #A9A9A9; background: white; resize: both; } textarea { background: 0; border: 0; resize: none; overflow: auto; } 

 <textarea autofocus></textarea> 

Answer 2

 $(".draggable").draggable(); $(document).on('blur', 'textarea', function () { $(this).parent().draggable( 'disable' ); $(this).after("<div class='text'>" + $(this).val() + "</div>").remove(); }); $(document).on('click', '.text', function() { $(this).parent().draggable( 'enable' ); $(this).after("<textarea>" + $(this).html() + "</textarea>").remove(); }); 

 .draggable { border: 1px solid #000; padding: 10px; width: 200px; } 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="1" class="ui-widget-content draggable"> <textarea></textarea> </div> <div id="2" class="ui-widget-content draggable"> <textarea></textarea> </div> <div id="3" class="ui-widget-content draggable"> <textarea></textarea> </div>