如何在回车键上操作列表元素

Question

我想允许使用contenteditable编辑有序列表。当用户在列表中更改或添加新元素时，我希望能够操作文本(例如，换行 span 标签、替换文本等(。

我已经为 Enter 键创建了一个侦听器，并且可以获取最后一个列表元素值。我试图更改它并替换为新值。但是，这会填充在输入压力机上创建的新列表元素。

<div>
   <ol contenteditable=true class="editor">
    <li><br></li>
   </ol>
</div>

$('.editor' ).on('keydown .editable', function(e){
    if ( e.keyCode === 13 ) {   
    var insertText = "<span>"+e.target.lastElementChild.innerText+"</span>";
    e.target.lastElementChild.innerHTML = insertText;
    return true
  }
 });

为列表中的任何位置的新条目实现此功能的最佳方法是什么？对 Jquery 解决方案开放

示例 JSFIDDLE

Answer 1

您可以使用 MutationObserver 来检测何时将子项添加到列表中，然后更新previousSibling以将其包装在<span>中：

function subscriber(mutations) {
  mutations.forEach(mutation => {
    mutation.addedNodes.forEach(node => {
      const prev = node.previousSibling;
      if (prev) {
        prev.innerHTML = `<span>${prev.innerHTML.replace(/<br>$/, '')}</span>`;
      }
    });
  });
}
const observer = new MutationObserver(subscriber);
observer.observe(document.querySelector('ol[contenteditable]'), { childList: true });

.editor span::after {
  content: '😀';
}

<ol contenteditable class="editor">
  <li>First li</li>
</ol>

Answer 2

您可以将逻辑绑定到最后一个li，并从它发出的事件中执行逻辑。

$('.editor .last-item')
  .on('click', function(e){
    // clear out the html so the user can just type
    e.target.innerHTML = '';
  })
  .on('keydown', function(e){
    if (e.keyCode === 13) {
      // ignore the enter key so it doesn't insert a new like
      e.preventDefault();
      // create the new li before the last one
      $('<li>'+ e.target.innerHTML.trim() +'</li>').insertBefore(e.target);
      // clear out the html so the user can keep entering items
      e.target.innerHTML = '';
    }
  })
  .on('blur', function(e){
    // if the user leaves the field, change it back to the instructional text
    e.target.innerHTML = 'Click to enter New List Item';
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
   <ol class="editor">
    <li class="last-item" contenteditable=true>Click to enter New List Item</li>
   </ol>
</div>

Answer 3

您可以设置一个间隔，根据需要修改li元素的 html，而不是在编辑发生时执行操作。

setInterval(function(){
    $('.editor' ).find('li').each(function(){
    if ($(this).html().indexOf('span')==-1){
            $(this).html('<span>' + $(this).html() + '</span>');
    }
  });
}, 200);

Answer 4

您好，您可能想检查一下，让我给您一个提示。 而不是使用

lastchild.innerHTML

将其替换为

nextSibling.innerHTML

喜欢这个

$('.editor' ).on('keydown .editable', function(e){
    if ( e.keyCode === 13 ) {
			
						
			var insertText = "<span>"+e.target.lastElementChild.innerText+"</span>";
			e.target.nextSibling.innerHTML = insertText;
			
			
			return true
		}
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ol contenteditable=true class="editor">
	<li><br></li>
</ol>
</div>

$('.editor' ).on('keydown .editable', function(e){
    if ( e.keyCode === 13 ) {   
    var insertText = "<span>"+e.target.lastElementChild.innerText+"</span>";
      e.target.nextSibling.innerHTML = insertText;
      return true
     }
    });