在页面上找到任意位置的插入位置

Question

我是兼职新开发人员,致力于Chrome扩展程序,可用作内部CR工具.

概念很简单,在键盘快捷键上,扩展名获取插入符号旁边的单词,检查它是否匹配模式,如果匹配为"true",则使用预设响应替换该单词.

为此,我主要使用此答案的修改版本.

我已经遇到了障碍,因为它适用于主动元素,但它似乎不适用于Chrome中的"撰写"窗口,或者与其他服务一致(Salesforce似乎也不喜欢它,例如).我有点认为这可能是iFrames的一个问题,所以我修改了一下并修改了这段代码的安静:

function getActiveElement(document){
    document = document || window.document;
    if( document.body === document.activeElement || document.activeElement.tagName == 'IFRAME' ){// Check if the active element is in the main web or iframe
        var iframes = document.getElementsByTagName('iframe');// Get iframes
        for(var i = 0; i<iframes.length; i++ ){
            var focused = getActiveElement( iframes[i].contentWindow.document );// Recall
            if( focused !== false ){
                return focused; // The focused
             }
         }
     }
     else return document.activeElement;
};

(我最初从另一个SO帖子中得到了我再也找不到了).好像我运气不好,好像没有骰子.

是否有一种简单的方法可以在每个页面上始终使用活动插入符获取活动元素,即使对于Gmail撰写窗口和类似服务,或者我将不得不为我的代码可以增加的服务列表编写自定义代码拿取插入符号？

我的完整代码就在这里.这很粗糙,而我只是想让它发挥作用,所以我理解它的草率部分需要整理:

 function AlertPrevWord() {
        //var text = document.activeElement; //Fetch the active element on the page, cause that's where the cursor is. 
        var text = getActiveElement();
        console.log(text);
        var caretPos = text.selectionStart;//get the position of the cursor in the element.
        var word = ReturnWord(text.value, caretPos);//Get the word before the cursor. 
        if (word != null) {//If it's not blank
            return word //send it back.
        }
    }

    function ReturnWord(text, caretPos) {
        var index = text.indexOf(caretPos);//get the index of the cursor
        var preText = text.substring(0, caretPos);//get all the text between the start of the element and the cursor. 
        if (preText.indexOf(" ") > 0) {//if there's more then one space character
            var words = preText.split(" ");//split the words by space
            return words[words.length - 1]; //return last word
        }
        else {//Otherwise, if there's no space character
            return preText;//return the word
        }
    }




function getActiveElement(document){
    document = document || window.document;
    if( document.body === document.activeElement || document.activeElement.tagName == 'IFRAME' ){// Check if the active element is in the main web or iframe
        var iframes = document.getElementsByTagName('iframe');// Get iframes
        for(var i = 0; i<iframes.length; i++ ){
            var focused = getActiveElement( iframes[i].contentWindow.document );// Recall
            if( focused !== false ){
                return focused; // The focused
             }
         }
     }
     else return document.activeElement;
};

Answer 1

我已经让它适用于 Gmail 窗口（大概还有其他可内容编辑的元素，而不仅仅是输入元素）。

编辑：换行符周围的失败是因为 window.getSelection().anchorOffset 返回相对于该特定元素的偏移量，而 ReturnWord 正在传递整个撰写窗口（其中包含多个元素）的文本。window.getSelection().anchorNode 返回正在计算偏移量的节点。

function AlertPrevWord() {
    var text = getActiveElement();
    var caretPos = text.selectionStart || window.getSelection().anchorOffset;        
    var word = ReturnWord(text.value || window.getSelection().anchorNode.textContent, caretPos);
    if (word != null) {return word;}
}

我最初使用 MutationObserver 来解释页面加载后创建的 Gmail 撰写 div，只是为了向其附加一个事件侦听器。

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    var nodes = mutation.addedNodes; //list of new nodes in the DOM
    for (var i = 0; i < nodes.length; ++i) {
      //attach key listener to nodes[i] that calls AlertPrevWord
    }
  });    
});
observer.observe(document, {childList: true, subtree:true });
    //childList:true notifies observer when nodes are added or removed
    //subtree:true observes all the descendants of document as well

编辑：我一直在测试的委托点击处理程序。关键事件处理程序到目前为止还不起作用。

$(document).on( "click", ":text,[contenteditable='true']", function( e ) {
   e.stopPropagation();
   console.log(AlertPrevWord());
});