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

Question

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

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. 删除表单并将修改后的项目重新插入列表中。