分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 内容可编辑div的新行上的触发器事件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在尝试收听一个表示在内容可编辑div中创建新行的事件。目的是最终在每次创建新的空行并且插入符号在该行上时，或者如果用户单击位于当前空行的插入符号位置时最终向用户显示一些选项。

在我的书中，似乎有四个事件会导致用户在一个可以内容的div中的新行：

>按进入
>粘贴到最后有空的新行的内容
>点击导致插入符号(闪烁的行)将位置移动到空行
>使用箭头键移动到新行

当然，在一个可以容纳的div中，一个新的线意味着不同的浏览器的东西，在chrome中似乎创建了< div>< br />< / div>标签，但是已经浏览了足够的SO，似乎其他浏览器可能会创建< div>< p>< / p>< / div>或者可能是< span>标签。

我现在已经尝试了几次，只需要完成它。它是否真的是聆听在该div下添加的新元素的最佳方式，和/或检查插入符位置当前是否在空的“新行”标签中。检查每次插入符号移动似乎效率很低 – 有没有更好的方法来做到这一点？

总结为tldr;人

有没有更好的方法来检查内容可编辑div的新行？
>如何有效地触发事件？

只是fyi这是一个Angular上下文，我也有jQuery(答案可以选择使用或不使用这些库)。

—–编辑—–

到目前为止，答案集中在新线“事件”的创建和监视这些事件上，也许轮询插入位置是一种更可靠的方式来确定插入符号是否在空行。

解决方法@H_404_26@

迄今为止讨论的其他答案是监视在内容可编辑div中创建换行符的事件。然而，从目前的努力来看，似乎这不是一个可靠的方式来监控用户是否将插入符号插入了新的一行。

尽管有一个seTinterval事件是笨重的，并增加了开销，也许这只是我的看法。我在OSX上的Firefox和Chrome中测试了以下内容。

function getNewLines() {
  console.log(document.getSELEction());
  if (document.getSELEction().anchorNodE) {
    var node = document.getSELEction().anchorNode;
    var nodeContents = "";
    if (node.innerHTML) {
      nodeContents = node.innerHTMl.toLowerCase();
    } else {
      nodeContents = node.innerHTML;
    }
    if (nodeContents !== undefined) {
      if (nodeContents === "" || nodeContents == "<br>" || nodeContents ==
        "<br/>" || nodeContents.substr(nodeContents.length - 5) == "<br/>" ||
        nodeContents.substr(nodeContents.length - 4) == "<br>") {
        console.log("you are on a new line :]");
      } else {
        console.log('nope not a new line');
      }
    } else {
      console.log('nice try,but no not a new line');
    }
  }
}
seTinterval(getNewLines,100);@H_197_30@ 
 <div contenteditable="true">
  <p>Lets get started!</p>
</div>@H_197_30@ 
 See Fiddle Here 
 旁注：内容可编辑的换行符的行为似乎有所不同，但是我在firefox中注意到它将模拟现场的元素。即如果您使用< div>< / div>，则firefox将使用< div>< / div>，如果您使用< p>< / p> firefox会做同样的事情