如何使用 jQuery 制作可编辑的列表项? [英] How to make editable list item using jQuery?

问题描述

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

I want to display user information in a listview with data pulled from a DB. Now my target is to make the listview editable so that when a user clicks on any listview, it responds like a "Textbox" and a keyboard appears (for mobile). After editing, the user can press a "save" button to save his/her editable contents to the DB. I am using HTML, jQuery, and CSS with the Adobe PhoneGap API.

推荐答案

我已经创建了一个小提琴，我认为这就是你想要的:

I have created a fiddle and i think this is what you want :

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

在小提琴上单击要编辑的文本，然后单击 input 元素的 focusOut，您的文本将保存，而 input 元素将隐藏.

In fiddle click over the text to edit and on focusOut of the input element your text will save and input element will hide.

更新

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

I checked your comment, you should try this:

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());
});

更新小提琴

希望能帮到你！

这篇关于如何使用 jQuery 制作可编辑的列表项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！