5

我正在尝试使用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，所以我不知道页面结构是什么提前。它需要适用于任何网页。 ))

4

2 回答 2

2

我认为您可能遇到的问题是在代码运行之前单击按钮会导致活动元素发生变化。如果您改为使用该mousedown事件并阻止默认按钮操作，则它在 Chrome 中可以正常工作：

http://jsfiddle.net/b3Fk5/2/

于 2012-08-16T00:01:06.900 回答
0

从 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);       
    }
 }
于 2012-08-23T21:11:00.967 回答