代码之家  ›  专栏  ›  技术社区  ›  Neithan Max

如何检测所选文本是否位于可编辑区域?

  •  0
  • Neithan Max  · 技术社区  · 5 年前

    编码者的幻想

    我创建了一个简单的用户脚本,可以对我选择的文本进行快速操作。事情是这样的:

    1. 我选择一个词,一个网站(不一定是链接),或者一个短语,比如说,来自 p 要素

    除了编辑文本外,它工作得很好。如果我正在编辑我在 textarea input 它会开火,可能会丢失我写的东西。幸运的是,通常会有缓存,甚至网站会警告我有未保存的更改,这样我就不会丢失我写的东西。但这是需要解决的问题。

    用户脚本应仅在无法编辑的文本上运行。如果所选文本在一个范围内,您可能会认为这与不调用函数一样简单 文本区 . 但是有很多方法可以显示可编辑的内容,而不使用经典元素。我找到的“最佳”过滤器是检查 document.activeElement.isContentEditable false . 这是一个 文本区 元素,这样我就可以将它添加到过滤器中,并且我可以用我能想到的其他一些元素来实现。但除了是一个丑陋的解决方案外,它并不是万无一失的。

    除了添加一个“你是不是意外地跑了我?”提示外,还有更好的方法吗?

    my current code

    0 回复  |  直到 5 年前
        1
  •  1
  •   erosman    5 年前

    if (['TEXTAREA', 'INPUT'].includes(document.activeElement.nodeName)) {
      // it is in textarea, input
    }
    else if (document.activeElement.isContentEditable) {
      // it is in contentEditable element
    }
    else {
      // not above
    }
    

    window.getSelection()

    const sel = window.getSelection();
    const text = sel.toString();
    
    if (!text.trim()) {
      // there is no selection
      // or selection is white-space
      // or selection is in textarea, input
    }
    else if (document.activeElement.isContentEditable) {
      // it is in contentEditable element
    }
    else {
      // not above
    }