jQuery脚本：点击时编辑<p>标签，回车时保存

Question

我有以下目标。假设我有<p>标签：

<p class="editbox">Original text</p>

我想做一个小的jQuery脚本，它将用<textarea>替换<p>标签，供用户输入文本，当用户点击Enter时，消失和用户的文本插入<p>标签。

例如：

1. 我在<p>标签中有"Original text"字符串。
2. 我单击此字符串，<textarea>出现"Original text"里面。
3. 我写"Original text is updated".
4. 我打了Enter.
5. <textarea>消失了。
6. <p>标记再次出现。
7. <p>标签现在已"Original text is updated"。

提前感谢！ :)

Answer 1

使用 contentEditable 属性，它将（神奇地）使您的p标签可编辑:)

<p contentEditable="true">I'm editable :)</p>

这是HTML5

来源 ： MDN

Answer 2

请检查此代码：

$(document).ready(function() {
  $('p').click(function() {
    $('p').hide();
    $('textarea').show();
  });
  $("textarea").keypress(function(event) {
    if (event.which == 13) {
      $('p').show().html($('textarea').val());
      $('textarea').hide();
    }
  });
})

textarea {
  display: none;
}

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<p class="editbox">Original text</p>
<textarea>Original text</textarea>