Jquery Set Cursor Position in Text Area

let text = document.querySelector(`textarea`);
let pos = text.textContent.indexOf(`\n`);
text.setSelectionRange(pos+1, pos+1);
text.focus();

<textarea cols="20" rows="4">
Dear sir,

Best regards,
John Smith  
</textarea>

Set cursor position at the beginning of the line

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

1. 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);.
2. 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.

jQuery Set Cursor to Beginning of Input Field on Focus

This will bind the focus AND click events of the input field to the function. Hope this helps!

$('#email').on('focus click', function() {  $(this)[0].setSelectionRange(0, 0);})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type="text" placeholder="Enter your name" autofocus><input type="text" id="email" value="@website.com">

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

$('[name=textbox2]').focus(function(){
    if($('[name=textbox1]').val() == ''){
        $('[name=textbox1]').focus();
    }
});