如何使用jQuery制作可编辑的列表项？

Question

我想在列表视图中显示用户信息，其中包含从数据库中提取的数据。 现在我的目标是使列表视图可编辑，以便当用户点击任何列表视图时，它会像“文本框”一样响应并出现键盘（用于移动设备）。 编辑后，用户可以按“保存”按钮将他/她的可编辑内容保存到数据库。 我在Adobe PhoneGap API中使用HTML，jQuery和CSS。

Answer 1

我创造了一个小提琴，我想这就是你想要的：

http://jsbin.com/ijexak/2/edit

在小提琴中单击要编辑的文本，然后在输入元素的focusOut上保存文本，输入元素将隐藏。

更新

我检查了你的评论，你应该试试这个：

HTML

   <ul>
       <li>
           <span class="display">erum</span>
           <input type="text" class="edit" style="display:none"/>
       </li>
       <li>
           <span class="display">ingress</span>
           <input type="text" class="edit" style="display:none"/>
       </li>
   </ul>

JS

$(".display").click(function(){
    $(this).hide().siblings(".edit").show().val($(this).text()).focus();
});

$(".edit").focusout(function(){
    $(this).hide().siblings(".display").show().text($(this).val());
});

更新了小提琴

希望能帮助到你！

Answer 2

<li contenteditable="true"> Editablecontent </li>

Answer 3

1. 在您的列表项上附加点击事件。
2. 单击时删除项目的内容并将其替换为带有输入框和按钮的表单
3. 重新定义表单的提交事件以对数据库执行所需的操作
4. 删除表单并将修改后的项目插回列表中。