单击“编辑”按钮时，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>