Possible To Scroll Caret Into View Inside A Single Html Text Field With Javascript?

Knowing the jQuery Caret plugin, I'm still seeing no way to do the following on a single line text box in HTML (i.e. the input:type=text control) with JavaScript: Programmatically

Solution 1:

You could try triggering a right key press after focus.

$('#textbox').focus();
var e = jQuery.Event("keydown");
e.which = 39; // aka right arrow.
$("input").trigger(e);

Solution 2:

try to set the scrollLeft property of the input, as:

input.scrollLeft = 10000;

You can use scrollWidth to get a better guess on the final value, but using a high one can ensure correctness on most cases.

Solution 3:

//hack to get cursor at end:

$(textboxselector).val($(textboxselector).val());

edit: should note focus first:

$(textboxselector).val(newtext);
$(textboxselector).focus();
$(textboxselector).val($(textboxselector).val());

Solution 4:

It's not possible to implement this behavior cross-browser. FireFox supports the KeyboardEvent.initKeyPress method, which allows key events to be simulated.

See the comments at the function below for an explanation. I've successfully tested this function in FireFox 3.6.22, 7.0.1 and Chrome 14.

The function itself is plugin-independent. Fiddle: http://jsfiddle.net/Jskbb/1/

/* @name caretAtEnd
 * @description Places caret at the end
 * @param elem  DOM element
 * @param focus boolean, optional. If true, the element will be focused.
 */functioncaretAtEnd(elem, focus){
    var value = elem.value;

    //Add an extra character to the input field (necessary for this method)// An additional advantage is that the caret automatically moves to the end
    elem.value = elem.value + ".";

    try {
        // Create and simulate/trigger a [Backspace] keypress event.var evt = document.createEvent("KeyboardEvent");
        evt.initKeyEvent("keypress", 1, 1, null, 0, 0, 0, 0, 8, 0);
        elem.dispatchEvent(evt);
    } catch(e){
        //The current key event is not supported yet. Change back the value// In some browsers, the caret is at the end after executing this code.
        elem.value = value;
    }

    //Optionally, Focus on the elementif(focus) elem.focus();
}

var element = $("#yourInputElement")[0]; //Important: Get the DOM element!
caretAtEnd(element);

Solution 5:

So with the help of Mark and Rob W, I finally managed to solve it.

My additional challenge was that the text box already has the focus, which came out is an issue (I'm using the whole stuff in the OnClientItemSelected of the Ajax Toolkit's AutoCompleteExtender).

So my solution is:

<ajaxToolkit:AutoCompleteExtender 
    runat="server" 
    ID="EMailTextBoxControlAutoCompleteExtender" 

    ...

    OnClientItemSelected="function() { 
        // Read current text and append some string.
        var tbSel = '#EMailTextBoxControl';
        var newText = $(tbSel).val() + ', ';

        // Since we already have the focus, 
        // remove it and set it to another control.
        $('#AdditionalRemarksControl').focus();

        // https://stackoverflow.com/questions/7892902/7903519#7903519
        $(tbSel).val(newText);
        $(tbSel).focus();
        $(tbSel).val($(tbSel).val());
    }">

It's working for me successfully in Google Chrome, Firefox and Internet Explorer 9. Hopefully it works in other browsers, too.

I'm marking Mark's comment as the answer.