如何“替换”Chrome 文本区域中选定的文本范围？

Question

我正在尝试使用 Javascript 来替换 Chrome 中任意选定 TEXTAREA 节点中的选定文本（！不是内容可编辑的 div ！）我在很多地方看到重复的代码片段来替换选定文本基本上是这样做的：

var sel = window.getSelection();
var range = sel.getRangeAt(0);
range.insertNode( document.createTextNode("test "));

但是，这不适用于 TEXTAREA 或 INPUT TYPE=TEXT 等输入字段。文本被插入到 TEXTAREA 之前而不是里面。

有一种替代方法可以使用 textarea.selectionStart 和 textarea.selectionEnd 修改文本区域内的选择文本。但是，这些需要弄清楚哪个 textarea 元素实际上处于活动/选择状态。Chrome/Webkit document.activeElement 好像坏了，坏了很久了。我想不出任何解决方法来找到“当前选择的文本区域”。看到这里的错误...

http://code.google.com/p/chromium/issues/detail?id=14436

您可以在此处查看我正在尝试解决的问题的微型演示。

http://dj1.willowmail.com/~jeske/_drop/insertIssue/1.html

http://ajaxandxml.blogspot.com/2007/11/emulating-activeelement-property-with.html

对此有何想法？

给定一个在任意 TEXTAREA 节点中选择任意位文本的网页，在不提前知道焦点所在的文本区域的情况下，如何找到活动的文本区域并将所选文本替换为其他文本？

（（仅供参考：我在 Chrome 扩展程序中使用此代码。页面内 javascript 内容脚本正在扩展页面 javascript，所以我不知道页面结构是什么提前。它需要适用于任何网页。 ))

Answer 1

截至 2012 年 8 月 23 日，Chrome 似乎无法正确支持 activeElement，因为它经常被设置为“body”，而本不该设置为“body”。

可能还存在一些挑战，因为在我的 chrome 扩展中，右键单击获取上下文菜单可能会更改 activeElement。

解决方案是提供一个focus处理程序来在 Chrome 中创建更可靠的 activeElement，然后使用与 TEXTAREA 的直接交互来处理选择替换。

var dActiveElement = null;

function _dom_trackActiveElement(evt) {
    if (evt && evt.target) {
      dActiveElement = evt.target;
      console.log("focus on: " + dActiveElement.nodeName + 
                  " id: " + dActiveElement.id);
    } else {
      console.log("focus else..");
    }
}

if (document.addEventListener) {
   document.addEventListener("focus",_dom_trackActiveElement,true);
}

function insertTextAtCursor(text) {
    console.log("insertTextAtCursor : " + text);    

    if (dActiveElement.nodeName.toUpperCase() == "TEXTAREA") {
       console.log("selection in textarea!  id: " + dActiveElement.id);

       var ta = dActiveElement;
       var saveSelectionStart = ta.selectionStart;

       var newvalue = ta.value.slice(0,ta.selectionStart) + 
                         text + ta.value.slice(ta.selectionEnd,ta.length);
       console.log("output : " + newvalue  + ", len : " + newvalue.length);
       var newSelectionEnd = ta.selectionStart + text.length;

       ta.value = newvalue;
       ta.selectionStart = ta.selectionEnd = (newSelectionEnd);       
    }
 }