javascript - 在没有焦点的情况下替换文本区域内的文本

Question

我想替换选定的文本(如果没有选择任何内容，则在光标位置后插入新文本)。新文本是从另一个文本框输入的。
我希望能够在不先单击(聚焦)文本区域的情况下插入新文本。
意思是:首先在textarea中选择要替换的文本，然后在文本框中输入新的文本并点击按钮。

<textarea id='text' cols="40" rows="20">
</textarea>

<div id="opt">
    <input id="input" type="text" size="35">
    <input type="button" onclick='pasteIntoInput(document.getElementById("input").value)' value="button"/>    
</div>


function pasteIntoInput(text) { 
  el=document.getElementById("text");
  el.focus();    
  if (typeof el.selectionStart == "number"&& typeof el.selectionEnd == "number") { 
    var val = el.value; 
    var selStart = el.selectionStart;
    el.value = val.slice(0, selStart) + text + val.slice(el.selectionEnd);        
    el.selectionEnd = el.selectionStart = selStart + text.length;
  } 
  else if (typeof document.selection != "undefined") {
    var textRange = document.selection.createRange();        
    textRange.text = text;       
    textRange.collapse(false);        
    textRange.select();
  } 
}  

在线示例: link text

Answer 1

因此，当您将焦点移出文本区域并关注输入标签时，您希望保留选择。

您需要记住选择(文本区域失去焦点时的起点和终点)并强制选择以使其持续存在。

要记住选择，您可以将 el.selectionStart 和 el.selectionEnd 存储在函数内的两个全局变量中，该函数在 onblur() 中调用 textarea 标签的事件。

然后在您的 pasteIntoInput() 中，您可以考虑替换这两点。

强制选择 - 检查此解决方案 for persisting选择。然而，这使用 jquery，而不是普通的 javascript。

但是，我不确定该解决方案是否真的有效。我在这里试过http://jsfiddle.net/sandeepan_nits/qpZdJ/1/但它没有按预期工作。

更新

我怀疑是否有可能在焦点消失后继续选择。可能选择需要重点放在那儿，而我给出的答案链接试图先聚焦然后选择。在那种情况下，这不会解决您的问题。所以，替代方案可能是 -

• 用 html div 伪造一个文本区域。您可以定义一些样式来创建类似选择的效果并应用它 onblur() 或使用简单的现成编辑器(如果可用)。

• 在单独的区域中动态显示选择。检查这个demo of jquery fieldSelection plugin .请记住，您已经将选择存储在全局变量中以进行实际替换。您只需要向用户显示将被替换的选择。我认为像这个演示一样单独显示选择可以节省您的时间，而且看起来也很酷。

当然要看你的要求了。

进一步更新

检查 http://jsfiddle.net/sandeepan_nits/qpZdJ/2/对于有效的“在没有焦点的情况下替换文本区域内的文本”(如您所愿)但没有选择模糊。我仍然不知道是否可以使选择保持模糊状态。

另一个更新(12 月 21 日)

适用于 IE 和其他浏览器的解决方案 http://jsfiddle.net/sandeepan_nits/qpZdJ/24/

这是相同的代码:-

html -

<textarea id='text' cols="40" rows="20" onbeforedeactivate="storeSelectionIeCase();" onblur="storeSelectionOthersCase();">
</textarea>

<div id="opt">
    <input id="input" type="text" size="35">
    <input type="button" onclick='pasteIntoInput(document.getElementById("input").value)' value="button"/>

</div>

和所有的js

var storedSelectionStart = null;
var storedSelectionEnd = null;

function pasteIntoInput(text)
{

    el=document.getElementById("text");

    el.focus();    
    if((storedSelectionStart != null) && (storedSelectionEnd != null))
    {
        start = storedSelectionStart;
        end = storedSelectionEnd;
    }
    else
    {
        start = el.selectionStart;
        end = el.selectionEnd;
    }
    if (typeof start  == "number"&& typeof end == "number")
    {
        var val = el.value;
        var selStart = start;
        var end  = selStart + text.length;
        el.value = val.slice(0, selStart) + text + val.slice(end );        
    }
    else if (typeof document.selection != "undefined")
    {
       var textRange = document.selection.createRange();        
       textRange.text = text;       
       textRange.collapse(false);        
       textRange.select();
    }
}  

function storeSelectionOthersCase()
{
    if(!(isBrowserIE6() || isBrowserIE7()))
    {
        storeSelection();
    }
    else
    {
        return false;
    }
}


function storeSelectionIeCase()
{
    if((isBrowserIE6() || isBrowserIE7()))
    {
        storeSelection();
    }
    else
    {
        return false;
    }
}


function storeSelection()
{
    //get selection
    el=document.getElementById("text");

    var el = document.getElementById("text");
    var sel = getInputSelection(el);
    //alert("check"+sel.start + ", " + sel.end);


    storedSelectionStart  = sel.start;
    storedSelectionEnd = sel.end;

   //alert("see"+storedSelectionStart  +" - "+storedSelectionEnd );
}

function getInputSelection(el)
{
    var start = 0, end = 0, normalizedValue, range,
        textInputRange, len, endRange;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
        start = el.selectionStart;
        end = el.selectionEnd;
    } else {
        range = document.selection.createRange();

        if (range && range.parentElement() == el) {
            len = el.value.length;
            normalizedValue = el.value.replace(/\r\n/g, "\n");

            // Create a working TextRange that lives only in the input
            textInputRange = el.createTextRange();
            textInputRange.moveToBookmark(range.getBookmark());

            // Check if the start and end of the selection are at the very end
            // of the input, since moveStart/moveEnd doesn't return what we want
            // in those cases
            endRange = el.createTextRange();
            endRange.collapse(false);

            if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                start = end = len;
            } else {
                start = -textInputRange.moveStart("character", -len);
                start += normalizedValue.slice(0, start).split("\n").length - 1;

                if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                    end = len;
                } else {
                    end = -textInputRange.moveEnd("character", -len);
                    end += normalizedValue.slice(0, end).split("\n").length - 1;
                }
            }
        }
    }

    return {
        start: start,
        end: end
    };
}

function isBrowserIE6()
{
    var ret = false;
    if(($.browser.msie) && (parseInt($.browser.version) == 6) && (!this.XMLHttpRequest))
    {
        ret = true;
    }
    return ret;
}

function isBrowserIE7()
{
    var ret = false;
    if(($.browser.msie) && ((parseInt($.browser.version) == 7) && (this.XMLHttpRequest)))
    { //Modification because of IE tester IE7 being detected as IE6
        ret = true;
    }
    return ret;
}

之前的 fiddle 在 IE 中不起作用，因为当 onblur() 事件触发时，选择在 IE 中被破坏。我已经为 IE 6 和 7 应用了一些基于浏览器的条件，但尚未在 IE 8 中进行测试。

感谢Tim Down谁帮助我确定了以前的 fiddle 的问题。