如何确定用户输入是否在富文本编辑器中(所有站点)

Question

我正在研究一个Chrome翻译扩展，允许用户选择文本并按下键(T)直接显示文本后面的翻译。

但是如果用户选择文本并按下输入框中的(T)，扩展也会显示翻译结果，这不是我想要的。幸运的是，输入字段通常包裹在<input></input>标记周围，因此我可以判断，当使用<input>标记时，用户不会触发翻译函数。

if (keyCode == "T") {
let userSelection = window.getSelection();
let userSelectionNode = window.getSelection().anchorNode.parentElement;
if ($(userSelectionNode).find("input").length == 0) {
let userSelection_string = userSelection.toString();
if (userSelection_string.length > 0) {
getTranslate(userSelection_string);
}
}
}

但是如果用户在富文本编辑器中，我的方法不起作用，并且我无法判断用户是否在富文本编辑器中。我是否有办法判断用户是否在富文本编辑器中?重要的是要注意扩展可以在所有网页上运行，因此该方法应该是通用的，而不是针对特定的富文本编辑器

Answer 1

他们使用contenteditable属性，你可以很容易地检测到:

let el = window.getSelection().anchorNode.parentElement;
if (!el.closest('[contenteditable="true"], [contenteditable=""], input, textarea')) {
// not in a text input
// .........
}