如何检测所选文本是否在可编辑区域？

Question

程序员的幻想

我创建了一个简单的用户脚本来快速处理我 select 编辑的文本。它是这样的：

我 select 一个词、一个网站（不必是 link）或一个短语，比方说，一个 p 元素
当我按下触发键时，算法会尝试判断它是网站还是文本。它将打开一个选项卡：如果它是一个网站，那就是它会加载的内容；如果是文本，它将 google 它。

问题露出丑陋的头

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

挑战

用户脚本只能运行无法编辑的文本。如果 selected 文本在 textarea 中，您会认为这就像不调用函数一样简单。但是有很多方法可以在不使用经典元素的情况下显示可编辑的内容。我发现的“最佳”过滤器是检查 document.activeElement.isContentEditable。然而，就在这个盒子里，returns false。这是一个 textarea 元素，所以我可以将它添加到过滤器中，而且我可以用我能想到的更多元素来实现。但除了是一个丑陋的解决方案之外，它也不是万无一失的。

除了添加“你运行我是不是不小心？”提示，有更好的方法吗？

编辑：my current code

Answer 1

如果我理解正确的话....这是一个如何去做的例子。

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
}

如何检测所选文本是否在可编辑区域？

How to detect if selected text is in an editable area?

javascript

google-chrome

tampermonkey

userscripts

程序员的幻想

问题露出丑陋的头

挑战