Set Cursor at a Length of 14 Onfocus of a Textbox

Set cursor at a length of 14 onfocus of a textbox

IE use different approach at setting cursor position than Firefox,Opera and Chrome. It's better to make a helper function, which will do it for you. I use this one for own needs.

function setCursor(node,pos){

    node = (typeof node == "string" || node instanceof String) ? document.getElementById(node) : node;

    if(!node){
        return false;
    }else if(node.createTextRange){
        var textRange = node.createTextRange();
        textRange.collapse(true);
        textRange.moveEnd(pos);
        textRange.moveStart(pos);
        textRange.select();
        return true;
    }else if(node.setSelectionRange){
        node.setSelectionRange(pos,pos);
        return true;
    }

    return false;
}

Last thing, is to call it from your onfocus handler.

Goodluck

I want to put cursor in beginning of text-box onfocus

The problem is that Chrome (I haven't heard of Safari doing this as well, but I'll take you word for it) kills the selection after the focus event has fired, so you need to add a timer. The following is adapted from my answer here:

How to place cursor at end of text in textarea when tabbed into

However, this generally isn't good usability: it's contrary to what the user expects and removes useful functionality when using the mouse (i.e. the caret going to the location the user clicks). You can probably get around that with some handling of mousedown and mouseup events.

Live demo: http://jsfiddle.net/timdown/z9DhX/1/

Code:

function moveCaretToStart(el) {
    if (typeof el.selectionStart == "number") {
        el.selectionStart = el.selectionEnd = 0;
    } else if (typeof el.createTextRange != "undefined") {
        el.focus();
        var range = el.createTextRange();
        range.collapse(true);
        range.select();
    }
}

var textBox = document.getElementById("id");

textBox.onfocus = function() {
    moveCaretToStart(textBox);

    // Work around Chrome's little problem
    window.setTimeout(function() {
        moveCaretToStart(textBox);
    }, 1);
};

Placing cursor in textbox at specified length

I've created a simple jQuery plugin function based on answers from this topic.

$.fn.setCursorPos = function(position) {
    return this.each(function() {
        var node = this;

        node.focus();

        if (node.setSelectionRange) {
            node.setSelectionRange(position, position);
        } else if (node.createTextRange) {
            var textRange = node.createTextRange();
            textRange.collapse(true);
            textRange.move('character', position);
            textRange.select();
        }
        node.selectionStart = position;
    });
};

Demo on jsFiddle.

Use JavaScript to place cursor at end of text in text input element

I faced this same issue (after setting focus through RJS/prototype) in IE.
Firefox was already leaving the cursor at the end when there is already a value for the field. IE was forcing the cursor to the beginning of the text.

The solution I arrived at is as follows:

<input id="search" type="text" value="mycurrtext" size="30" 
       onfocus="this.value = this.value;" name="search"/>

This works in both IE7 and FF3 but doesn't work in modern browsers (see comments) as it is not specified that UA must overwrite the value in this case (edited in accordance with meta policy).

put cursor at end of text input's value

This works for me

<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>

How to set cursor position at the end of input text in Google Chrome

It seems like the focus event is fired before the cursor is placed when you focus an input, a hacky workaround would be to use a setTimeout like so:

$('#Search').focus(function() {
    setTimeout((function(el) {
        var strLength = el.value.length;
        return function() {
            if(el.setSelectionRange !== undefined) {
                el.setSelectionRange(strLength, strLength);
            } else {
                $(el).val(el.value);
            }
    }}(this)), 0);
});

Try this fiddle: http://jsfiddle.net/esnvh/26/

Edited to 0ms timeout, as @SparK pointed out this is enough to push to end of execution queue.

how to set cursor position at the end of the value in flutter in textfield?

I've been having the same problem with setting a TextEditingController and this is what worked for me.

controller.text = someString;
controller.selection = TextSelection.fromPosition(TextPosition(offset: controller.text.length));

TextSelection.fromPosition() does the following (from the documentation):

Creates a collapsed selection at the given text position. A collapsed
selection starts and ends at the same offset, which means it contains
zero characters but instead serves as an insertion point in the text.

Edit - another version, which is a bit shorter and suggested by others here:

controller.text = someString;
controller.selection =
          TextSelection.collapsed(offset: controller.text.length);

Putting cursor at end of textbox in javascript

You have to focus element AND set caret position

This JSFiddle shows you how it works. jQuery has been used for simplicity in this example, but it can be completely omitted if one desires so. setSelectionRange function is a DOM function anyway.

In general it does this:

input.focus();
input.setSelectionRange(inputValueLength, inputValueLength);

Obtaining input and its value length can be obtained using DOM functionality or using library functions (as in jQuery).

Do we need input value length?

I haven't tested in other browsers but running in Chrome it allows to set a larger than actual position and caret will be positioned at the end. So something like:

input.setSelectionRange(1000,1000);

will work as expected (provided your text is shorter than 1000 characters. :)

Note: This function isn't supported in IE8 and older. All latest versions of most used browsers support it. For older versions of IE resort to text ranges.

How to set cursor to input box in Javascript?

In JavaScript first focus on the control and then select the control to display the cursor on texbox...

document.getElementById(frmObj.id).focus();
document.getElementById(frmObj.id).select();

or by using jQuery

$("#textboxID").focus();

---

Related Topics