Set cursor position at the beginning of the line

Question

I know his question has been answered in the site, but i have some conflict with my current code that i've used. (find it below)

I have default value in my text filed "example.company.com" and i set the focus to clear the example from the value.

jQuery(document).ready(function() {

    jQuery.fn.cleardefault = function() {
    return this.focus(function() {
        if( this.value == this.defaultValue ) {
            this.value = ".company.com";
        }
    }).blur(function() {
        if( !this.value.length ) {
            this.value = this.defaultValue;
        }
    });
};
jQuery(".clearit input, .clearit textarea").cleardefault();

});

I also need to set the cursor to the beginning of the line when user clicks and the example disappeared, but i wasn't able to do that. I'm not very expert in jQuery, so asking here to get help.

Thanks!

*"..i have some conflict between the other jQuery i've been used.."* ??? — Abhitalks, Jun 19 '14 at 14:40
Not sure but here is a question on text areas and how to move cursors. I am not 100% sure if it works on input because I have never done it myself http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area — Huangism, Jun 19 '14 at 14:41
@abhitalks I'm not sure if you got the point, When user clicks on the field some text will be disappear so then i need to set the cursor at the beginning of the line. There are tons of solutions on the Stackoverflow for this question but the main question was, i have conflict with my current code. By the way thanks for helping me out. — Amir, Jun 19 '14 at 14:55
@Amit, Yes I missed your point. Anyways, here it is: http://jsfiddle.net/vU5yf/4/ — Abhitalks, Jun 19 '14 at 15:10
@abhitalks You rock! Post your answer, so i can mark it as answered. — Amir, Jun 19 '14 at 15:20

score 1 · Accepted Answer · answered Jun 19 '14 at 15:23

There are two ways to set the cursor to a particular position in an input:

setSelectionRange(startPosition, endPosition);: This selects the text between the two provided positions. If the start and end are the same, then the cursor is just placed before the character at that position. So, to place the cursor at beginning you would do a setSelectionRange(0, 0);.
setCursorPosition(position);: This actually moves the cursor to the position provided. So, to place the cursor at beginning you would do a setCursorPosition(0);.

After having tried your code, it seems that on focus (especially via click), the cursor is placed at the point of click and the setSelectionRange and/or setCursorPosition gets overridden.

One possible workaround would be to wrap this in a timer to induce a faux-delay. Something like this:

Demo: http://jsfiddle.net/abhitalks/vU5yf/5/

Relevant Code:

jQuery.fn.cleardefault = function() {
    return this.focus(function(e) {
        if( this.value == this.defaultValue ) {
            this.value = ".company.com";
            var t = this;
            window.setTimeout(function() {
                t.setSelectionRange(0, 0);
                // t.setCursorPosition(0);
            }, 0); 
        }
    }).blur(function(e) {
        if( !this.value.length ) {
            this.value = this.defaultValue;
        }
    });
};


jQuery(".clear").cleardefault();

You may try to increase the timeout by a little amount to tweak it, if required. But, don't make it too high otherwise there's a possibility the user will be able to input another character before the timer fires.

Set cursor position at the beginning of the line

1 Answers1