Estoy trabajando en una extensión de traducción de Chrome que permite a los usuarios seleccionar un texto y presionar una tecla (T) para mostrar la traducción directamente detrás del texto.
Pero si el usuario selecciona texto y presiona (T) en el cuadro de entrada, la extensión también mostrará el resultado de la traducción, que no es lo que quiero. Afortunadamente, el campo de entrada generalmente se envuelve alrededor de la etiqueta <input></input> , por lo que puedo decir que el usuario no activa la función de traducción cuando se usa la etiqueta <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); } } }Pero si el usuario está en un editor de texto enriquecido, mi método no funciona y no puedo saber si el usuario está en un editor de texto enriquecido. Entonces, ¿tengo alguna forma de saber si el usuario está en un editor de texto enriquecido? Es importante tener en cuenta que la extensión se ejecuta en todas las páginas web, por lo que el método debe ser genérico y no estar dirigido a un editor de texto enriquecido en particular.
Usan atributos contenteditable , que puedes detectar fácilmente:
let el = window.getSelection().anchorNode.parentElement; if (!el.closest('[contenteditable="true"], [contenteditable=""], input, textarea')) { // not in a text input // ......... }