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

Question

I need your help with something. I am attempting to try and add the ability for the user to be able to real time edit a UL LI list by being able to click on the LI element. Then, upon clicking on the LI element, the element is changed to that of input box with the LI's current text value.

Then, when the user clicks off of the LI element the input box goes away and the LI element is returned to its normal state with the newly updated value.

I am trying to accomplish the above, however, with the current state of my code, it just adds another box, and does not actually allow me to click inside of it to add a new value. And also, when I click onto a new LI element, it just keeps adding another box and so on and so on.

Here's a fiddle: https://jsfiddle.net/0o0n8rea/

Here's the code in question:

window.onload = function() {

    $("#refdocs_list li").click(function(){

        $(this).html('<input type="text" value='+ $(this).text() +'>').focus()

    });

    $("#refdocs_list li").focusout(function(){

    });

}

Here is the HTML markup:

<div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;">

    <ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;">

        <li>test1</li>
        <li>test2</li>
        <li>test3</li>

    </ul>

</div>

Answer 1

Keep things simple, add the contenteditable property to the element.

JSFiddle

Fiddle

Answer 2

You could wrap a span around your text and then replace that element with the input and vice versa using jQuery's replaceWidth() and a common attribute as a selector, such as data-id="editable-list-item" or other.

Similar to this:

 $("#refdocs_list li").on('click', 'span[data-id="editable-list-item"]', function() { var $input = $('<input type="text" data-id="editable-list-item">'); $input.val($(this).html()); $(this).replaceWith($input); $input.focus(); }); $("#refdocs_list li").on('focusout', 'input[data-id="editable-list-item"]', function() { var $span = $('<span data-id="editable-list-item">'); $span.html($(this).val()); $(this).replaceWith($span); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;"> <li><span data-id="editable-list-item">test1</span></li> <li><span data-id="editable-list-item">test2</span></li> <li><span data-id="editable-list-item">test3</span></li> </ul> 

Answer 3

Can something like this work for you ?

 <ol contenteditable="true"> <li> Line 1 </li> <li> Line 2 </li> </ol> 

Answer 4

Here is a simple, working solution. It is not ideal, but should be a good starting point.

 $('li').on('click',function() { $(this).children('.value').addClass('hidden'); $(this).children('.edit').removeClass('hidden'); }); $('.edit').on('change',function() { $(this).siblings('.value').html($(this).val()); $('.edit').addClass('hidden'); $('.value').removeClass('hidden'); }); 

 .hidden { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <span class="value">Value 1</span> <input class="edit hidden" type="text" value="Value 1" /> </li> <li> <span class="value">Value 2</span> <input class="edit hidden" type="text" value="Value 2" /> </li> <li> <span class="value">Value 3</span> <input class="edit hidden" type="text" value="Value 3" /> </li> </ul> 

Answer 5

See Below Example :

 $("li").click(function(){ $(this).html('<li><input type="text" value="'+ $(this).text() +'"></li>').focus() }); $("#refdocs_list li").focusout(function(){ }); 

 input[type='text']{ width:100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;"> <ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </div>