javascript - 当插入符进入特定的 div/span/a 标签时以及插入符离开标签时触发事件

Question

思路是这样的-
有一个包含一些文本的 contenteditable 元素。我正在尝试建立一个标记机制(有点像 twitter 的人在您键入“@”时进行标记)。每当用户键入“@”时，当他们继续键入时，它会显示一个带有建议和过滤器的弹出窗口。到这里为止很容易，我已经弄明白了。当/仅当插入符号位于包含标签的元素上时，我才需要显示弹出窗口时，问题就来了。

<div contenteditable="">
  <p>Some random text before
    <a href="javascript:;"
       class="name-suggest"
       style="color:inherit !important;text-decoration:inherit !important">@samadams</a>
    Some random text after</p>
</div>

现在，每当用户将插入符号移到 a 标签上/点击它时，我想触发一个显示弹出窗口的事件，并在插入符号离开 a 标签时将其删除。 (有点像 focus/blur 但它们似乎不起作用)。 onmousedown 有效，但无法判断光标是否已通过键盘移动到 anchor 标记中。

此外，我在 angularjs 中执行此操作，因此，任何针对此的解决方案都是可取的，但不是必需的。

一直在努力让它工作一天，非常感谢任何帮助。

Answer 1

当您的插入符位置位于包含 @

的 anchor 节点时，这会让您知道

$('#content').on('mouseup keydown keyup', function (event) {

  var sel = getSelection();
  
  if (sel.type === "Caret") {
    var anchorNodeVal = sel.anchorNode.nodeValue;
    if ( anchorNodeVal.indexOf('@') >= 0) {
      $('#pop').show()
    } else {
      $('#pop').hide()
    }
  }
  
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content" contenteditable="">
  <p>Some random text before
    <a href="javascript:;"
       class="name-suggest"
       style="color:inherit !important;text-decoration:inherit !important">@samadams</a>
    Some random text after</p>
</div>
  
<div id="pop" style="display:none">Twitter node found</div>

您可以添加一些正则表达式来进一步验证选择。