不在焦点时隐藏textarea字段

Question

我想创建一个可以在我点击其他位置时隐藏<textarea>字段的功能。这意味着<textarea>字段将隐藏，<textarea>内的字词将保留。

您可以在Mapmarker National Geographic上查看示例，方法是单击左侧的文本按钮，编写消息，然后单击文本区域（见下文）。

这是我目前的代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这不能用纯CSS完成，而是需要Javascript。
我在下面使用jQuery，只需在<div>外点击时创建一个<textarea>的值<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>

更新版本：

由于OP评论并说它确实需要可编辑，并且只使用HTML和CSS，这里有一个（更不那么漂亮）的版本来回答这个问题：

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>