Javascript 如何在按Enter键时操作列表元素

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

我已经为Enter键创建了一个监听器，可以获取最后一个list元素的值。 我已尝试更改此值并替换为新值。但是，这会填充在enter键上创建的新列表元素

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

$（'.editor'）.on（'keydown.editable'，函数（e）{
如果（e.keyCode===13）{
var insertText=“”+e.target.lastElementChild.innerText+”；
e、 target.lastElementChild.innerHTML=插入文本；
返回真值
}
});

对于列表中任何位置的新条目（不仅仅是末尾），实现此功能的最佳方法是什么？开放Jquery解决方案

示例

您可以使用检测子项何时添加到您的列表中，然后更新以前的同级项，将其包装为一个

：

功能订户（突变）{
突变。forEach（突变=>{
突变.addedNodes.forEach（节点=>{
const prev=node.previousSibling；
如果（上一个）{
prev.innerHTML=`${prev.innerHTML.replace（/
$/，''）}`；
}
});
});
}
const observer=新的变异观察者（订户）；
observer.observe（document.querySelector（'ol[contenteditable]'），{childList:true}）
.editor span:：after{
内容：“您可以将逻辑绑定到最后一个
li
，并根据它发出的事件执行逻辑


$（'.editor.last item'）
.on（'click'，函数（e）{
//清除html，以便用户只需键入
e、 target.innerHTML=''；
})
.on（'keydown'，功能（e）{
如果（如keyCode===13）{
//忽略enter键，这样它就不会插入新的like
e、 预防默认值（）；
//在最后一个li之前创建新li
$（“
”+e.target.innerHTML.trim（）+”
）.insertBefore（e.target）；
//清除html，以便用户可以继续输入项目
e、 target.innerHTML=''；
}
})
.on（'blur'，函数（e）{
//如果用户离开该字段，请将其更改回说明文本
e、 target.innerHTML='单击以输入新列表项'；
})；

点击进入新列表项
您可以设置一个间隔，根据需要修改
li
元素的html，而不是在编辑时采取操作

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

setInterval（函数（）{
$（'.editor'）。查找（'li'）。每个（函数（）{
if（$（this.html（）.indexOf（'span'）=-1）{
$（this.html（“”+$（this.html（）+“”）；
}
});
}, 200);
您好，您可能想检查一下，让我给您提个醒。不要使用

lastchild.innerHTML

换成

nextSibling.innerHTML

像这样


$（'.editor'）.on（'keydown.editable'，函数（e）{
如果（如keyCode===13）{
var insertText=“”+e.target.lastElementChild.innerText+”；
e、 target.nextSibling.innerHTML=插入文本；
返回真值
}
})；



使最后一个li可编辑并将事件逻辑放在其上可能更容易。在enter上，在我尝试此操作之前插入一个新的li，它不会更改元素。谢谢。但是我想允许用户编辑以前的元素，此解决方案限制了这一点。@Schaffer很容易将contenteditabel包含在列表中ly创建了li元素。谢谢。我尝试过这个方法，虽然它允许编辑内容，但当按enter键时，它会停止创建新元素。有趣的解决方案，谢谢。让我进一步探讨这个问题，因为它似乎做了我想做的事。我想允许使用TAB键嵌套列表，所以我实现了liste用于制表符的ners。请参阅fiddle这将停止调用观察者。是否有方法可以手动调用/触发它？现在已解决。只需添加子树：true。{childList:true，subtree:true}。解决方案运行良好。再次感谢
nextSibling.innerHTML