上下文菜單如果文本是輸入標記/文本框，則JavaScript無法獲取所選文本

Question

我遇到了一個非常大的問題，爲了從網頁中以某種方式獲取選定的文本，然後使用contextmenu處理它......當我解決Chrome，Firefox和IE11，我發現我不能得到Firefox和Internet Explorer時選定的文本是在輸入框中輸入選定的文本....

...我已經尋找天以某種方式解決，最後我已成功...

這是原始腳本Internet Explorer

var parentwin = external.menuArguments 
 
var selectedText = getSel(); 
 

 

 
function getSel(){ 
 
    var w=window,d=parentwin.document,gS='getSelection'; 
 
    return (''+(w[gS]?w[gS]():d[gS]?d[gS]():d.selection.createRange().text)).replace(/(^\s+|\s+$)/g,''); 
 
}

這爲FireFox

var contextMenu = require("sdk/context-menu"); 
 
var tabs = require("sdk/tabs"); 
 
var clipboard = require("sdk/clipboard"); 
 
var {Cc,Ci} = require('chrome'); 
 
var simpleGetLibrary = null; 
 
var menuItem = contextMenu.Item({ 
 
    label: "Get selected text", 
 
    context: contextMenu.SelectionContext(), 
 
    contentScript: 'self.on("click", function() {' + 
 
       ' var text = window.getSelection().toString();' + 
 
       ' self.postMessage(text);' + 
 
       '});', 
 
    onMessage: function (selectionText) { 
 
    console.log(selectionText); 
 
\t clipboard.set(selectionText); //this line copy the selected text to Clipboard 
 
}

但我不知道，我怎麼能解決讓莫名其妙的文字時，它是在一個輸入框... <INPUT> ...</INPUT> 解決方案如下...

Answer 1

對於Internet ExplorerIE11

var parentwin = external.menuArguments 
 
var selectedText = getSel(); 
 

 

 
function getSel(){ 
 
    var w=parentwin.window,d=parentwin.document,gS='getSelection'; 
 
    var selectedText; 
 
    var rv=(''+(w[gS]?w[gS]():d[gS]?d[gS]():d.selection.createRange().text)).replace(/(^\s+|\s+$)/g,''); 
 
    parentwin.console.log("the selected text is in first try is:"+rv); 
 
    
 
if (rv=="") { 
 
    var allinput = parentwin.document.getElementsByTagName("input"); //I get an array of all input tags 
 
    var index; 
 
    var newsel; 
 
    var found="false"; 
 
    for (index = 0; index < allinput.length; index++) { 
 
    parentwin.console.log("index: "+index); 
 
    newsel=""; 
 
    parentwin.console.log("newsel= "); 
 
    try { 
 
     var ss = allinput[index].selectionStart; 
 
     parentwin.console.log("ss"); 
 
     var se = allinput[index].selectionEnd; 
 
     parentwin.console.log("se"); 
 
     if (typeof ss === "number" && typeof se === "number") { 
 
     newsel=allinput[index].value.substring(ss, se); 
 
     found=newsel; 
 
     if (newsel.length>0){ 
 
     rv=newsel; 
 
     found="true"; 
 
     allinput[index].selectionEnd=allinput[index].selectionStart; 
 
     newsel=""; 
 
     } 
 
     } 
 
    } 
 
    catch(err){} 
 
    parentwin.console.log("input fields "+index+"/"+allinput.length+" fieldname:"+allinput[index].getAttribute("name")+" selection: "+newsel); 
 
    if (found=="true"){ 
 
    index=allinput.length; 
 
    } 
 
    } 
 
    parentwin.console.log("found=:"+found); 
 
} 
 
    return rv; 
 
}

而對於Firefox是有點棘手，因爲我不能訪問DOM，所以我需要解決這ContentScript建築，然後我直接發送結果..因爲我不能解決如何得到唯一的選擇，我發送輸入框的值，如果不是全部選擇都沒關係...

var contextMenu = require("sdk/context-menu"); 
 
var tabs = require("sdk/tabs"); 
 
var clipboard = require("sdk/clipboard"); 
 
var preferences = require("sdk/simple-prefs").prefs; 
 
var {Cc,Ci} = require('chrome'); 
 
var simpleGetLibrary = null; 
 
var menuItem = contextMenu.Item({ 
 
    label: "Get selected text", 
 
    context: contextMenu.SelectionContext(), 
 
    contentScript: 'self.on("click", function (node, data) {' + 
 
       ' var text = window.getSelection().toString();' + 
 
\t \t \t \t ' console.log("Selected node is: "+node.nodeName);' + 
 
\t \t \t \t ' console.log("Selected value is: "+node.value);' + 
 
       ' if (text.lenght>0)' + 
 
\t \t \t \t ' self.postMessage(text);' + 
 
\t \t \t \t ' else ' + 
 
\t \t \t \t ' if (node.nodeName=="INPUT")' + 
 
\t \t \t \t ' self.postMessage(node.value);' + 
 
\t \t \t \t '});', 
 
    onMessage: function (selectionText) { 
 
    console.log("Selection sent for processing is: "+selectionText); 
 
    clipboard.set(selectionText); //this line copy the selected text to Clipboard 
 
    }