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

【问题标题】：How do I make an editable UL LI list using jQuery?如何使用 jQuery 制作可编辑的 UL LI 列表？
【发布时间】：2017-08-31 15:54:37
【问题描述】：

我需要你的帮助。我正在尝试添加让用户能够通过单击 LI 元素来实时编辑 UL LI 列表的功能。然后，点击 LI 元素后，该元素将变为输入框的元素，并带有 LI 的当前文本值。

然后，当用户单击 LI 元素时，输入框消失，并且 LI 元素以新更新的值返回到其正常状态。

我正在尝试完成上述操作，但是，对于我的代码的当前状态，它只是添加了另一个框，实际上并不允许我在其中单击以添加新值。而且，当我单击一个新的 LI 元素时，它只会不断添加另一个框，依此类推。

这是一个小提琴： https://jsfiddle.net/0o0n8rea/

这是有问题的代码：

window.onload = function() {

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

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

    });

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

    });

}

这是 HTML 标记：

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

【问题讨论】：

标签： javascript jquery html html-lists

【解决方案1】：

您可以将span 包裹在您的文本周围，然后使用input 替换该元素，反之亦然，使用jQuery 的replaceWidth() 和一个公共属性作为选择器，例如data-id="editable-list-item" 或其他。

与此类似：

$("#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>

【讨论】：

【解决方案2】：

保持简单，将contenteditable 属性添加到元素。

JSFiddle

Fiddle

【讨论】：

我想给用户一个编辑框的外观和感觉。
@BobbyJones 然后单击只需向活动元素添加一个类，以提供一个突出的设计。

【解决方案3】：

这样的东西对你有用吗？

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

【讨论】：

【解决方案4】：

这是一个简单、有效的解决方案。这并不理想，但应该是一个很好的起点。

$('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>

【讨论】：

【解决方案5】：

见下例：

$("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>

【讨论】：

你想做什么？