用於顯示和編輯數據的文本框

Question

我目前擁有刪除了邊框的文本框，因此它們不顯示爲文本框並且是隻讀的。我還有一個編輯按鈕，顯示邊框並允許用戶編輯信息並將其保存到數據庫。

我的問題應該是在文本框中顯示數據？它只是使編輯更容易，否則我不得不點擊編輯按鈕時動態添加文本框。

Answer 1

另一種選擇是將html5 attrtibute'contenteditable'設置爲true的'span'或'div';

<div contenteditable="true"/> 

您可以在單擊按鈕事件上切換真/假。

Answer 2

你可以使用div標籤並在那裏加載你的輸出。

<div id="output"></div> 

，直到使用，這將是不可見的，並且它不會是編輯，當然，你可以，如果你想輸出區域以後脫穎而出任何你喜歡的方式紀念它。

Answer 3

你可以嘗試這樣與jquery-

HTML：

<input type="text" id="data" disabled="true" value="sampel data"/> 
<input type="button" id="button" value="Edit" /> 

的Jquery：

$("#button").click(function(){ 
    $("#data").attr("disabled", false); 
}); 

Live Preview