Question

我有以下目标。我们说我有<p>标签：

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

我想创建一个小的jQuery脚本，它会将<p>标记替换为<textarea>，以便用户输入文本，当用户点击Enter时，dissapears和用户的文本会插入{ {1}}标记。

例如：

我在<p>标记中有"Original text"个字符串。
我点击此字符串，<p>与<textarea>一起显示内部。
我写"Original text"。
我点击"Original text is updated"。
Enter dissapears。
<textarea>标记再次出现。
<p>标记现在为<p>。

提前致谢！：）

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>

jQuery脚本：点击时编辑<p>标签，然后按Enter键保存</p>

2 个答案: