Bootstrap JQuery/Ajax內聯編輯當點擊編輯按鈕

Question

有人可以建議我一個內聯編輯當我點擊編輯按鈕時我的標籤內容應該用輸入文本替換，我可以在我的MySQL中更新它D b。

我的代碼：

<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>