最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How do I make an editable UL LI list using jQuery? - Stack Overflow

programmeradmin6浏览0评论

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 acplish 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: /

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>

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 acplish 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/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>
Share Improve this question edited Aug 31, 2017 at 16:07 user736893 asked Aug 31, 2017 at 15:54 BobbyJonesBobbyJones 1,3641 gold badge28 silver badges48 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 4

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 mon 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./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>

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

JSFiddle

Fiddle

Can something like this work for you ?

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

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./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>

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./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>

发布评论

评论列表(0)

  1. 暂无评论