单击编辑按钮时引导 Jquery/Ajax 内联编辑答案

【问题标题】：Bootstrap Jquery/Ajax Inline Edit when clicking Edit button单击编辑按钮时引导 Jquery/Ajax 内联编辑
【发布时间】：2015-12-06 20:49:26
【问题描述】：

有人可以建议我进行内联编辑吗？当我单击编辑按钮时，我的标签内容应该被替换为输入文本，并且我可以在我的 mysql 数据库中更新它。

我的代码：

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

任何帮助将不胜感激谢谢！

【问题讨论】：

一定要内联吗？
@MubasharAbbas 是的，它符合我的要求，谢谢！

标签： javascript jquery mysql ajax twitter-bootstrap

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：