在文本輸入中將插入位置保持在可見位置 - firefox行為異常

Question

我正在想我的文本輸入框，點擊包含選擇的“標簽”的div來添加元內容。 我的文本輸入寬度為35，但我希望它能夠溢出。

我搜索並找到了在更新的輸入內容結束時聚焦和定位我的插入符的方法，並且chrome和IE表現自己並自動滾動以在輸入框的可見區域中顯示光標，但是當文本輸入是完整和溢出Firefox 3.0.7將正確定位的插入符號向右移出視圖（但如果按鍵盤上的右箭頭，則可以在不打擾位置的情況下進入它）。

任何幫助贊賞。

Answer 1

看到我的回答這個問題 。 雖然它是相對kludgy，你可以觸發FF中的按鍵事件，輸入將滾動到結尾（顯示你想看到它的插入符號）。

Answer 2

我在FireFox的textarea中滾動到選區時遇到了類似的問題。 我無法發送'空格'然后發送'退格'字符，因為這會覆蓋textarea中的選擇。 所以我找到了一種更好的方法，即在選擇之后立即重新鍵入字符，這將迫使選擇可見。

這是代碼：

function setSelRange(inputEl, selStart, selEnd) { 
     if (inputEl.createTextRange) {
        var range = inputEl.createTextRange(); 
        range.collapse(true); 
        range.moveEnd('character', selEnd); 
        range.moveStart('character', selStart); 
        range.select(); 
        //range.scrollIntoView();
    } else if (inputEl.setSelectionRange) {
        inputEl.focus(); 
        inputEl.setSelectionRange(selEnd, selEnd + 1);
        // ---- Firefox Workaround ----
        // Send a virtual key, which is the character immediately after the 
        // selected text. It justs rewrites the same character so that no unnecessary changes
        // are made to the content.
        // When the selection is at the end of the textarea, an extra space is appended
        // because the inputEl.value.charCodeAt(selEnd) would otherwise cause an error.
        var evt = document.createEvent("KeyboardEvent");
        if (inputEl.value.length == selEnd) {
            evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
        } else {
            evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, inputEl.value.charCodeAt(selEnd));
        }
        inputEl.dispatchEvent(evt);
        inputEl.setSelectionRange(selStart, selEnd);

    } 
}

希望這可以幫助任何一直在尋找這個的人。 我浪費了很多時間試圖解決這個問題。

Answer 3

謝謝，這對我來說是jtompson。 將它與現有腳本相結合，將插入符號移動到textinput或textarea的末尾，似乎涵蓋了IE7，FF3和chrome。

    function setCaretPosition(elemId, caretPos) {
        var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.setSelectionRange(caretPos, caretPos);
                elem.focus();
                // Workaround for FF overflow no scroll problem
                // Trigger a "space" keypress.
                var evt = document.createEvent("KeyboardEvent");
                evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, 32);
                elem.dispatchEvent(evt);
                // Trigger a "backspace" keypress.
                evt = document.createEvent("KeyboardEvent");
                evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 8, 0);
                elem.dispatchEvent(evt);
            }
            else
                elem.focus();
        }
    }
}
 setCaretPosition(document.getElementById("searchinput").id, document.getElementById("searchinput").value.length);