我怎样才能在Chrome浏览器的textarea“替换”选中的文本范围?(How can I “re

2019-06-27 01:59发布

我试图使用JavaScript来取代在Chrome中所选择的任意TEXTAREA节点的所选文本的代码片段我看到很多地方重复替换选定的文本基本上做到这一点(不是内容编辑的DIV!):

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

然而,这并不对输入字段,诸如TEXTAREA或INPUT TYPE = TEXT工作。 文本插入前的文本区域,而不是在它里面。

有修改使用textarea.selectionStart和textarea.selectionEnd一个文本区域内的选定的文本的替代方法。 然而,这些需要找出哪些textarea元素实际上是活性的/选择的。 镀铬/ 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节点选择,不知道的时候什么textarea的重点是在未来,我该如何找到有效的textarea并更换一些其他的文本选定的文本?

((FYI:我使用这个代码在Chrome扩展的页内的javascript脚本的内容是扩大的页面的JavaScript,所以我不知道的页面结构是提前它所需要的任何网页的工作。 ))

Answer 1:

我想你可能会遇到的问题是,有源元件如点击按钮的代码运行之前的结果改变。 如果改用mousedown事件,并防止默认的按钮动作,它在Chrome中正常工作:

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



Answer 2:

看来,作为2012年8月23日, Chrome不正确地支持activeElement ,因为它通常被设置为“体”,当它不应该。

也可能有一些挑战,因为在我的浏览器扩展程序,右击,以获得上下文菜单可能会改变在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);       
    }
 }


文章来源: How can I “replace” a selected text-range in a textarea in Chrome?