How to make editable list item using jQuery?

Question

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.

Answer 1

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

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

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

Updated

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

Updated fiddle

Hope it helps!

Answer 2

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