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

我需要你的帮助。我试图尝试添加能够让用户能够通过点击LI元素来实时编辑UL LI列表。然后，单击LI元素后，该元素将改为LI的当前文本值的输入框。如何使用jQuery制作可编辑的UL 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>

来源

2017-08-31 BobbyJones

你可以环绕你的文字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>

来源

2017-08-31 16:09:29 Nope

让事情简单，contenteditable属性添加到元件。

的jsfiddle

Fiddle

来源

2017-08-31 15:58:00 Script47

我想给用户一个编辑框的外观和感觉，虽然。 – BobbyJones

@BobbyJones然后点击只需将一个类添加到活动元素，以给出一个突出的设计。 – Script47

能像这样对你的工作？

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

来源

2017-08-31 16:01:11

-1

参见下文实施例：

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

 
\t });

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;"> 
 
\t 
 
\t \t <ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;"> 
 
\t \t 
 
\t \t \t <li>test1</li> 
 
\t \t \t <li>test2</li> 
 
\t \t \t <li>test3</li> 
 
\t \t 
 
\t \t </ul> 
 
\t \t 
 
\t </div>

来源

2017-08-31 16:04:35

我无法编辑该值。 – BobbyJones

你想做什么？ –

下面是一个简单，工作溶液。这并不理想，但应该是一个很好的起点。

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

来源

2017-08-31 16:06:38

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

回答

相关问题