javascript - 如果文本是输入标签/文本框，上下文菜单 JavaScript 无法获取所选文本

Question

我遇到了一个非常大的问题，要以某种方式从网页中获取选定的文本，然后使用上下文菜单对其进行处理...当我解决 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);
	clipboard.set(selectionText);   //this line copy the selected text to Clipboard
}

但我不知道如何解决以某种方式获取输入框中的文本... <INPUT> ...</INPUT> 解决办法如下...

Answer 1

对于 Internet Explorer IE11

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();' +
				 '  console.log("Selected node is: "+node.nodeName);' +
				 '  console.log("Selected value is: "+node.value);' +
                 '  if (text.lenght>0)' +
				 '  self.postMessage(text);' +
				 '  else ' +
				 '  if (node.nodeName=="INPUT")' +
				 '  self.postMessage(node.value);' +
				 '});',
  onMessage: function (selectionText) {
    console.log("Selection sent for processing is: "+selectionText);
    clipboard.set(selectionText);   //this line copy the selected text to Clipboard
  }