javascript - 使用 javascript onclick 替换任何要输入的 html 标签

Question

我正在尝试用 javascript 替换 html 标签来输入 如果按下标签，它将变成输入

示例:

<a href="#">text</a> 

替换为:

<input value="text" />

或者:

<h2 href="#">text</h2> 

替换为:

<input value="text" />

这是代码:

/**
  We're defining the event on the `body` element, 
  because we know the `body` is not going away.
  Second argument makes sure the callback only fires when 
  the `click` event happens only on elements marked as `data-editable`
*/
$('body').on('click', '[data-editable]', function(){
  
  var $el = $(this);
              
  var $input = $('<input/>').val( $el.text() );
  $el.replaceWith( $input );
  
  var save = function(){
    var $p = $('<p data-editable />').text( $input.val() );
    $input.replaceWith( $p );
  };
  
  /**
    We're defining the callback with `one`, because we know that
    the element will be gone just after that, and we don't want 
    any callbacks leftovers take memory. 
    Next time `p` turns into `input` this single callback 
    will be applied again.
  */
  $input.one('blur', save).focus();
  
});

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

<p data-editable>First Element</p>
  
 <a data-editable class="navbar-brand" href="#page-top">Second Element</a>
<p>Not editable</p>

问题是:我的类被删除，并且也不是已创建的标签“p”，而不是“a”或“h2”或其他标签

Answer 1

您想制作与正确的标签相同的标签吗？

如果理解得好，那就行了:

$('body').on('click', '[data-editable]', function(){
  
  var $el = $(this);
              
  var $input = $('<input/>').val( $el.text() );
  $el.replaceWith( $input );
  $input.focus();
  var save = function(){
    $el.text($input.val());
    $input.replaceWith( $el );
  };
  
  $input.one('blur', save);
  
});

.how { color: red}
.green { color: lime}

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

<p class="how" data-editable>First Element</p>
  
 
<a href="#" data-editable>Second Element</a>
<h2 class="green" data-editable>Second Element</h2>

<p>Not editable</p>