單擊時將文本元素轉換為輸入字段類型文本，並在單擊時變回文本

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>');
        }      

    });
}

這是小提琴的現場示例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>

Answer 2

小提琴： https : //jsfiddle.net/7jz510hg/1/

問題在於沒有使用 var 定義 inputIdWithHash 和 elementValue 變量，它們變成了全局變量。

var inputIdWithHash
var elementValue

然后，由於它們具有全局范圍，因此它們的舊值可用於文檔單擊處理程序。 您希望它們在 turnTextIntoInputField 函數內局部作用域。

和更新維護值： https : //jsfiddle.net/7jz510hg/2/

旁注，您使用的是 jQuery 1.6，所以我不得不使用 unbind 函數而不是 off。

更新小提琴： https : //jsfiddle.net/7jz510hg/3/

這使用最新的 jquery 事件命名空間，因此我們可以將多個單擊事件附加到文檔，從而允許我們在字段之間單擊而不會丟失任何內容。 如果您直接單擊字段而不是單擊字段、單擊文檔、單擊字段，則前面的小提琴會搞砸。

Answer 3

如果有人需要的話，我會將 Yura 的出色答案從 JQuery 移植到 Vanilla JavaScript。 這個也適用於 p、h1、h2、span 等等：

 function editData(e) { const el = e.target; const input = document.createElement("input"); input.setAttribute("value", el.textContent); el.replaceWith(input); const save = function() { const previous = document.createElement(el.tagName.toLowerCase()); previous.onclick = editData; previous.textContent = input.value; input.replaceWith(previous); }; /** We're defining the callback with `once`, 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.addEventListener('blur', save, { once: true, }); input.focus(); } for (const child of document.querySelectorAll('[data-editable]')) { child.onclick = editData; }

 <h1 data-editable>First h1</h1> <p data-editable>First Element</p> <p data-editable>Second Element</p> <p>Not editable</p>

有關的：

• 相當於 jQuery one() 的 JS

Answer 4

我建議，不要把這復雜化。 我使用簡單的隱藏和顯示方法將文本更改為輸入字段。 這很容易實現和理解。

 $('#editable').on('click',function(){ var groupname = $("#editable").html(); $("#editable").css({'display':"none"}); $("#inputgroupname").css({'display':'block'}); $("#inputgroupname").focus(); $("#inputgroupname").val(groupname); }); $("#inputgroupname").focusout(function(){ $('#editable').html($("#inputgroupname").val()); $("#inputgroupname").css({'display':'none'}); $("#editable").css({'display':"block","margin-top":"2px"}); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h3 class="box-title" style="margin-top:2px; margin-left:5px;" id="editable">Hello</h3> <input type="text" id="inputgroupname" style="display:none;">

Answer 5

嘗試這個

$('#tbl').on('click','.editable',function() {

  var t = $(this);          
  var input = $('<input>').attr('class', 'savable').val( t.text() );
  t.replaceWith( input ); 
  input.focus();

});

$('#tbl').on('blur','.savable',function() {

  var input = $(this);      
  var t = $('<span>').attr('class', 'editable').text( input.val() );
  input.replaceWith( t ); 

});

http://jsfiddle.net/yp8bt6s0/