單擊“編輯”按鈕時，Bootstrap Jquery / Ajax內聯編輯

Question

有人可以建議我進行內聯編輯嗎？當我單擊“編輯”按鈕時，標簽內容應替換為輸入文本，並且可以在mysql數據庫中對其進行更新。

我的代碼：

<label style="display:block;">mylabel</label>
<input type="text" style="display:none;">myinput</input>
<button>edit</button>

任何幫助將不勝感激謝謝！

Answer 1

如果可能的話，我可能只會使用contentEditable。

 document.addEventListener('DOMContentLoaded', function(){ var btn = document.getElementById("editButton"); btn.addEventListener("click", function(){ var editLabel = document.getElementById("editLabel"); editLabel.contentEditable = true; editLabel.className = "editActive"; }); }); 

 #editLabel{ margin-bottom: 25px; display: inline-block; padding: 5px; box-sizing: border-box; } #editButton{ display: block; } .editActive{ border: 1px inset #e3e3e3; cursor: text; } 

 <label id="editLabel">Hello World</label> <button id="editButton">Edit Label</button> 

Answer 2

我不建議內聯進行。 如您所見，結果將不干凈。 這將起作用。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <label style="display:block;">mylabel</label> <input type="text" style="display:none;" value="myInput"> <button onclick="$('label').text($('input').val())">edit</button>