Question

我有一些HTML代码，我想添加内联可编辑框。我希望能够编辑点击的内容。现在，文本将替换为包含文本值的textarea。但是我无法在textarea中输入新值。

为什么我无法编辑textarea的内容？

＆＃13;

$("h1,h2,h3,h4,h5,h6,p").click(function() {
  var element = $(this);

  $(element).after().html("<textarea class='form-control'>" + $.trim($(element).text()) + "</textarea>");

  $("textarea").mouseout(function() {
    element.html($(this).val());
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a h2</h2>
<p>Some text here</p>

＆＃13;

Answer 1

设置自定义data-*属性以检查元素是否处于编辑状态，否则每次单击事件都会重复生成textarea。

$("h1,h2,h3,h4,h5,h6,p").click(function() {
  var element = $(this);
  if (!element.data('editing')) {
    element.data('editing', true);
    $(element).html("<textarea class='form-control'>" + $.trim($(element).text()) + "</textarea>");

    $("textarea").mouseout(function() {
      element.html($(this).val());
      element.data('editing', false);
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a h2</h2>
<p>Some text here</p>

仅供参考：在您的代码中after()方法没有任何实际上没用的内容。

<小时/> 将textarea放入h1标记内也不是一个好习惯，所以用textarea完全替换它，这样可以避免代码中的问题。

$(document).on('click', "h1,h2,h3,h4,h5,h6,p", function() {
  var $element = $(this);
  var $text = $("<textarea class='form-control'>" + $.trim($element.text()) + "</textarea>");
  $element.replaceWith($text);
  $text.mouseout(function() {
    $element.text(this.value);
    $(this).replaceWith($element);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>This is a h2</h2>
<p>Some text here</p>

我认为最好使用HTML5 contenteditable属性。

<h2 contenteditable="true">This is a h2</h2>
<p  contenteditable="true">Some text here</p>

如何使用jQuery在textarea中切换文本/标题？

1 个答案: