一千萬個為什麽

搜索

在沒有焦點的情況下替換textarea中的文本

我想替換所選文本(如果沒有選擇任何內容,則在光標位置後插入新文本)。 新文本是從另一個文本框輸入的。
 我希望能夠插入新文本而不先在textarea中單擊(聚焦)。
含義:首先選擇要在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();
  } 
}  

Online example: link text

最佳答案

因此,當您從textarea中聚焦並專註於輸入標記時,您希望保留選擇。

您需要記住選擇(文本區域失去焦點時的起點和終點)並強制選擇以使其保持不變。

要記住選擇,可以將 el.selectionStartel.selectionEnd 存儲在函數內的兩個全局變量中,該函數在 onblur() textarea標簽事件。

然後在 pasteIntoInput()中,您可以考慮這兩個點進行替換。

強制選擇 - 檢查此解決方案以保留選擇。這使用jquery,但不是普通的javascript。

但是,我不確定解決方案是否真的有效。我在這裏嘗試了 http://jsfiddle.net/sandeepan_nits/qpZdJ/1/ 但是它沒有按預期工作。

更新</強>

我懷疑焦點消失後是否有可能堅持選擇。可能選擇需要集中在那裏,我給出的答案鏈接試圖集中然後選擇。在這種情況下,這不會解決您的問題。所以,替代方案可能是 -

  • 偽造帶有html div的文本區域。您可以定義一些樣式來創建像效果這樣的選擇並將其應用於 onblur()或使用簡單的現成編輯器(如果可用)。

  • 在單獨的區域中動態顯示選擇。查看 jQuery fieldSelection插件演示。請記住,您已將選擇存儲在全局變量中以進行實際替換。您只需向用戶顯示將要替換的選擇。我認為像這個演示一樣單獨顯示選擇可以節省您的時間,而且看起來也很酷。

但當然要取決於你的要求。

Further Update

檢查 http://jsfiddle.net/sandeepan_nits/qpZdJ/2/ 是否正常工作替換textarea中沒有焦點的文本“(就像你想要的那樣)但沒有選擇模糊。我仍然不知道是否可以保持選擇模糊。

另一個更新(12月21日)

Working solution for IEs as well as other browsers http://jsfiddle.net/sandeepan_nits/qpZdJ/24/

這是相同的代碼: -

HTML -





<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 幫助我找到前一個小提琴的問題。

轉載註明原文: 在沒有焦點的情況下替換textarea中的文本