我怎样才能“取代” Chrome中textarea中选定的文本范围？ [英] How can I "replace" a selected text-range in a textarea in Chrome?

问题描述

我试图用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似乎已被打破，并且已被打破了很长一段时间。我找不出任何解决方法来找到当前选定的textarea。看到这里的错误...

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

您可以看到微型 - 我在这里试图解决的问题的解决方案。

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

< a href =http://ajaxandxml.blogspot.com/2007/11/emulating-activeelement-property-with.html =nofollow> http://ajaxandxml.blogspot.com/2007/11/emulating- activeelement-property-with.html

对此有何看法？

在任意TEXTAREA节点中选择一个任意位的文本，而不会提前知道焦点在哪个textarea中，我如何找到活动的textarea并用其他文本替换选定的文本？

（（仅供参考：我在Chrome扩展程序中使用此代码。页内javascript内容脚本正在扩展页面javascript，因此我不知道）

解决方案

看来，截至8月23日/ 2012， Chrome无法正确支持activeElement ，因为它是通常在不应该时设置为身体。

可能还有一些挑战，因为在我的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）; 
 
 
函数insertTextAtCursor（text）{
 console.log（insertTextAtCursor：+ text）; 
 
 if（dActiveElement.nodeName.toUpperCase（）==TEXTAREA）{
 console.log（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）; 
} 
} 
  

I'm trying to use Javascript to replace the selected text in an arbitrary selected TEXTAREA node in Chrome (! not a content editable div !) The code fragment I see repeated in lots of places to replace selected text basically does this:

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

However, this does not work for input fields such as TEXTAREA or INPUT TYPE=TEXT. The text is inserted BEFORE the TEXTAREA instead of inside it.

There is an alternative method to modify the selection text inside a text area using textarea.selectionStart and textarea.selectionEnd. However, these require figuring out which textarea element is actually active/selected. Chrome/Webkit document.activeElement seems to be broken and has been broken for a long time. I can't figure out any workaround to find the "currently selected textarea". See the bug here...

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

You can see a micro-demo of the problem I'm trying to solve here.

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

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

Any thoughts on this?

Given a webpage with an arbitrary bit of text selected in an arbitrary TEXTAREA node, without knowing ahead of time what textarea the focus is in, how do I find the active textarea and replace the selected text with some other text?

(( FYI: I'm using this code in a Chrome extension. An in-page javascript content script is extending the page javascript, so I have no idea what the page structure is ahead of time. It needs to work for any webpage. ))

解决方案

It appears that as of 8/23/2012, Chrome does not properly support activeElement, as it is often set to "body" when it shouldn't be.

There may also be some challenges because in my chrome extension, right-clicking to get a context menu might be altering the activeElement.

The solution was to provide a focus handler to create a more reliable activeElement in Chrome, and then use direct interaction with the TEXTAREA to handle the selection replacement.

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);       
    }
 }

这篇关于我怎样才能“取代” Chrome中textarea中选定的文本范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！