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

概述我想允许使用contenteditable编辑有序列表.当用户更改或在列表中添加新元素时,我希望能够处理文本(例如,包裹在span标签中,替换文本等).我为Enter键创建了一个侦听器,并且可以获取最后一个列表元素值.我试图更改此值并替换为新值.但是,这将填充在Enter印刷机上创建的新列表元素.<div> <ol contented

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

我为Enter键创建了一个侦听器,并且可以获取最后一个列表元素值.
我试图更改此值并替换为新值.但是,这将填充在Enter印刷机上创建的新列表元素.

<div>   <ol contenteditable=true >    <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: '          总结       
以上是内存溢出为你收集整理的javascript-如何在Enter键上 *** 作列表元素 全部内容，希望文章能够帮你解决javascript-如何在Enter键上 *** 作列表元素 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1105444.html