Saving carriage position in visible position in text input - firefox misbehaves

Question

I play with the idea of ​​my click input text box on a div containing a selection of "tags" to add meta content. My text input has a width of 35, but I want it to overflow.

I searched and found methods for focusing and placing my caret at the end of the updated input content, and chrome and IE behave and automatically scroll to show the cursor in the visible area of ​​the input field, but when the text input is full and full. Firefox 3.0.7 leaves a correctly positioned position to the right (although if you press the right arrow on the keyboard, you can get to it without breaking the position).

Any help was appreciated.

Answer 1

Thanks for working jtompson for me. Combining it with an existing script to move the caret to the end of the text area or text area seems to span IE7, FF3, and 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);

Answer 2

See my answer to this question . Although it is relatively cloned, you can trigger a keypress event in FF, and the input will scroll to the end (showing the caret where you want to see it).

Answer 3

I had a similar problem with scrolling to a selection in a text box in FireFox. I could not send a “space” and then the “backspace” character, because that would replace the selection in the text box. Therefore, I found a better way, which was to actually repeat the character immediately after the selection, which would make the selection visible.

Here is the code:

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

    } 
}

Hope this helps anyone looking for this. I spent a lot of time trying to figure it out.