javascript-如何在Enter键上操作列表元素

前端之家收集整理的这篇文章主要介绍了javascript-如何在Enter键上操作列表元素 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我想允许使用contenteditable编辑有序列表.
用户更改或在列表中添加新元素时,我希望能够处理文本(例如,包裹在span标签中,替换文本等).

我为Enter键创建了一个侦听器,并且可以获取最后一个列表元素值.
我试图更改此值并替换为新值.但是,这将填充在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

最佳答案
您可以使用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: '

猜你在找的HTML相关文章