Question

我需要你的帮助。我试图通过能够点击LI元素来为用户添加能够实时编辑UL LI列表的能力。然后，在单击LI元素时，元素将更改为具有LI当前文本值的输入框的元素。

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

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

以下是有问题的代码：

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>

Answer 1

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

<强>的jsfiddle

Fiddle

Answer 2

这样的事情能为你效劳吗？

＆＃13;

\n

＆＃13;

Answer 3

您可以在文本周围包含span，然后使用jQuery的input和公共属性作为选择器替换replaceWidth()，反之亦然，例如{{1}或其他。

与此类似：

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

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

Answer 5

见下面的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何使用jQuery创建可编辑的UL LI列表？

5 个答案: