CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-lists
BobbyJones
BobbyJones

Reputation: 1364

How do I make an editable UL LI list using jQuery?

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>

Upvotes: 3

Views: 2107

Answers (5)

Bhupinder Singh
Bhupinder Singh

Reputation: 284

Can something like this work for you ?

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

Upvotes: 3

Nope
Nope

Reputation: 22339

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>

Upvotes: 4

user736893
user736893

Reputation:

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>

Upvotes: 0

Maulik
Maulik

Reputation: 785

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>

Upvotes: -1

Script47
Script47

Reputation: 14550

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

JSFiddle

Fiddle

Upvotes: 3

Related Questions