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

Posted 2023-05-08

【中文标题】如何使用 jQuery 制作可编辑的列表项？

【英文标题】：How to make editable list item using jQuery?

【发布时间】：2013-03-28 20:02:33

【问题描述】：

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

【参考方案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());
);

Updated fiddle

希望对你有帮助！

【讨论】：

是的，这可以正常工作，但是如果我尝试在 中使用多个 标记，并且当我单击编辑 标记时，两个列表标记都会在内部合并一个文本框，但我不想要这个，我想一次修改一个列表标签，文本框应该只包含一个列表项文本。这是我想要的小提琴jsfiddle.net/erum/uenZW，当我点击“erum”时，只有列表项应该被文本框替换，用户将能够编辑它，而其他列表项中没有变化

但它不适用于动态 我已经在这里发布了我的代码***.com/questions/15927937/… 在这段代码中我已经放置了动态文本框并从 DB 填充数据但是当我需要动态放置 当用户单击任何列表项时，该列表应该被隐藏，并且应该出现一个文本框，其值与

的文本相同

当用户单击列表项时，应该会出现一个文本框，然后告诉我如何检查文本框的验证

如果用户删除初始内容并留空，则之后无法点击和编辑

【参考方案2】：

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

【参考方案3】：

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