编辑动态文本HTML

Question

我在HTML项目代表食物菜单

<ul> 
<li id = "soratable1" >big burger<p>decription of big burger</p><small>$6.50</small></li> 
<li id = "soratable2" >cheese burger<p>decription of cheese burger</p><small>$6.50</small></li> 
<li id = "soratable3" >fish burger<p>decription of fish burger</p><small>$6.50</small></li> 
<li id = "soratable4" >bacon burger<p>decription of bacon burger</p><small>$6.50</small></li> 

使用jQuery我提出这样的排序列表的列表。用户可以添加和删除这个列表中的项目。编辑我只想让用户点击文本，编辑它并在数据库中自动更新。我正在考虑在文本框中放入每件物品，并用css隐藏边界，然后使用一些onfocus onblur魔法，但这看起来有点过时。

有什么建议吗？

Answer 1

一种替代方法是使用jEditable插件。

检查出来@http://www.appelsiini.net/projects/jeditable

Answer 2

你可以有一些那种交换包含在里包含的文本输入框中的文本的“编辑”图标。然后，听取输入的onblur事件。 这是一个看起来像什么的例子。 HTML：

<ul> 
    <li><a id="LINK" href="#">edit</a><span id="TEXT">Text goes here</span><input id="INPUT" type="text" style="display:none" /></li> 
</ul> 

的Javascript：

$(document).ready(function() 
{ 
    $("#LINK").click(function(){ 
    $("INPUT").val($("#TEXT").text()); 
    $("INPUT").show(); 
    $("#TEXT").hide(); 
    }); 

    $("#INPUT").blur(function(){ 
    $("#TEXT").html($("INPUT").val()); 
    $("#INPUT").hide(); 
    $("#TEXT").show(); 
    }); 
});