将插入符号位置保持在文本输入中的可见位置 - firefox 行为不端答案

【问题标题】：Keeping caret position in a visible position in text input - firefox misbehaves将插入符号位置保持在文本输入中的可见位置 - firefox 行为不端
【发布时间】：2010-10-15 17:21:18
【问题描述】：

我正在玩弄我的文本输入框的想法，即单击包含“标签”选择的 div 以添加元内容。我的文本输入宽度为 35，但我希望它能够溢出。

我已经搜索并找到了将插入符号聚焦和定位在更新的输入内容末尾的方法，chrome 和 IE 会自动滚动以在输入框的可见区域显示光标，但是当文本输入已满并溢出 Firefox 3.0.7 使正确定位的插入符号在右侧看不到（尽管如果您按键盘上的向右箭头，您可以在不影响位置的情况下到达它）。

任何帮助表示赞赏。

【问题讨论】：

标签： javascript firefox textinput

【解决方案1】：

查看我的回答this question。虽然它比较笨拙，但您可以在 FF 中触发按键事件，然后输入将滚动到末尾（在您希望看到的位置显示插入符号）。

【讨论】：

【解决方案2】：

我在 FireFox 中滚动到文本区域中的选择时遇到了类似的问题。我无法发送“空格”和“退格”字符，因为这会覆盖文本区域中的选择。所以我找到了一种更好的方法，即在选择后立即虚拟地重新输入字符，这将强制选择可见。

代码如下：

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);

    } 
}

希望这可以帮助任何一直在搜索此内容的人。我浪费了很多时间试图弄清楚这一点。

【讨论】：

【解决方案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);

【讨论】：