javascript - 单击时将文本元素转换为输入字段类型的文本，单击后又变回文本

Question

我正在尝试创建一个字段动态变化的表单。

从简单的文本开始，当有人点击此文本时，它会转移到可编辑的文本输入字段中。当有人点击离开时，它会变回不可编辑的文本。

我尝试了一下，但它似乎无法正常工作。在前几次点击时工作正常，但随后它丢失了 inputId 并混合了按钮。

这是html

<p id="firstElement" onclick="turnTextIntoInputField('firstElement');">First Element</p>
<p id="secondElement" onclick="turnTextIntoInputField('secondElement');">Second Element</p>

这是 JavaScript(使用 jQuery)。

我是 JavaScript 的新手，所以它可能不是最优质的代码...

function turnTextIntoInputField(inputId) 
{  
    console.log(inputId);
    inputIdWithHash = "#"+inputId;
    elementValue = $(inputIdWithHash).text();
    $(inputIdWithHash).replaceWith('<input name="test" id="'+inputId+'" type="text" value="'+elementValue+'">');

    $(document).click(function(event) { 
        if(!$(event.target).closest(inputIdWithHash).length) {
            $(inputIdWithHash).replaceWith('<p id="'+inputId+'" onclick="turnTextIntoInputField(\''+inputId+'\')">'+elementValue+'</p>');
        }      

    });
}

这是关于 fiddle 的实例 https://jsfiddle.net/7jz510hg/

我会很感激任何帮助，因为它让我很头疼......

Answer 1

首先，您不需要在 html 本身中使用 onclick。

这是您可能采用的另一种方法:

/**
  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>
  
<p data-editable>Second Element</p>
  
<p>Not editable</p>