在没有焦点的情况下替换textarea中的文本

Question

我想替换所选文本(如果没有选择任何内容,则在光标位置后插入新文本).新文本从另一个文本框输入.
我希望能够插入新文本而不先在textarea中单击(聚焦).
含义:首先选择要在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();
  } 
}  

在线示例: 链接文本

Answer 1

因此,当您从textarea中聚焦并专注于输入标记时,您希望保留选择.

您需要记住选择(文本区域失去焦点时的起点和终点)并强制选择以使其保持不变.

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

然后在你的内部pasteIntoInput()你可以考虑这两个点进行更换.

强制选择 - 选中此解决方案以保留选择.这使用jquery,但不是普通的javascript.

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

更新

我怀疑焦点消失后是否有可能坚持选择.可能选择需要集中在那里,我给出的答案链接试图集中然后选择.在这种情况下,这不会解决您的问题.所以,替代方案可能是 -

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

• 在单独的区域中动态显示选择.查看jquery fieldSelection插件的演示.请记住,您已将选择存储在全局变量中以进行实际替换.您只需向用户显示将要替换的选择.我认为像这个演示一样单独显示选择节省了你的时间,它看起来也很酷.

但当然要取决于你的要求.

进一步更新

检查http://jsfiddle.net/sandeepan_nits/qpZdJ/2/是否正常工作"在没有焦点的情况下替换textarea内的文本"(如你所愿),但没有选择模糊.我仍然不知道是否可以保持选择模糊.

另一个更新(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;
}

之前的小提琴在IE中不起作用,因为在onblur()事件触发时,选择在IE中被销毁.我已经为IE 6和7应用了一些基于浏览器的条件,但尚未在IE 8中进行测试.

感谢Tim Down帮助我找到了前一个小提琴的问题.