I have an input field <input value="@website.com" type="text" name="email" id="email"> and I want to make it so when a user focuses on this field, it will move the cursor to be before the @website.com.

I have the following Javascript/jQuery code but it does not seem to work:

$(document).ready(function() { $("#email").focusin(function(){ $("#email").focus(); $("#email")[0].setSelectionRange(0,0); }); }); 

It seems like the .focus() keeps calling the focusin() function.

I know $("#email")[0].setSelectionRange(0,0); is the proper way to move the cursor to the front but how do I bind it to when the field has focus?

Edit: So when I use:

$("#email").focus(function(){ $("#email")[0].setSelectionRange(0,0); }); 

It sets the cursor to the beginning when I tab into the field but not when I click in.

I have an input field <input value="@website.com" type="text" name="email" id="email"> and I want to make it so when a user focuses on this field, it will move the cursor to be before the @website.com.

I have the following Javascript/jQuery code but it does not seem to work:

$(document).ready(function() { $("#email").focusin(function(){ $("#email").focus(); $("#email")[0].setSelectionRange(0,0); }); }); 

It seems like the .focus() keeps calling the focusin() function.

I know $("#email")[0].setSelectionRange(0,0); is the proper way to move the cursor to the front but how do I bind it to when the field has focus?

Edit: So when I use:

$("#email").focus(function(){ $("#email")[0].setSelectionRange(0,0); }); 

It sets the cursor to the beginning when I tab into the field but not when I click in.

Edit2: This is different than enter link description here because that just gets the caret position whereas I am looking to set the caret position.