的jquery/JavaScript的轉換純文本消息轉換爲文本輸入字段

Question

我有以下請求：

上創建的編輯觸發點擊時轉變成一個文本輸入元件的純文本字段。當離開輸入元素時，文本將被存儲在數據庫中，並且該字段將被轉換回帶有新內容的純文本字段。當在輸入中按ESC時，最近的值被恢復。爲此，我使用以下代碼：

<div id="value"><span id="text">some text</span></div> 
<div id="trigger">[EDIT]</div> 
<div style="display: none;" id="storage"> 
    <input type="text" id="input" value="some text"/> 
</div> 

<script type="text/javascript"> 
    $('#trigger').click(function() { 
    var t = $('#text').detach(); 
    var e = $('#input').detach(); 

    $('#storage').append(t); 
    $('#value').append(e); 
    e.focus(); 
    }); 

    $('#input').blur(function() { 
    var t = $('#text').detach(); 
    var e = $('#input').detach(); 

    if (t.text() != e.val()) { 
     $.getJSON(...); 
    } 

    $('#storage').append(e); 
    $('#value').append(t); 
    }); 

    $('#input').keyup(function(event) { 

    if (event.which == 27) { 
     $('#input').val($('#text').text()); 
     $('#input')[0].blur(); 
    } 

    }); 

</script> 

感謝@nnnnnn這現在可以工作。但是，有沒有更簡單的方法來實現這一點使用一些預先存在的API函數？

非常感謝。

Answer 1

使用jQuery編輯這裏是演示的鏈接

： http://www.appelsiini.net/projects/jeditable/default.html

對插件的主頁 http://www.appelsiini.net/projects/jeditable

Answer 2

我開發了一個插件，你需要什麼：

$.convertTo

我希望這會有所幫助，問候。