Question

91

jQuery Set Cursor to Beginning of Input Field on Focus

rated 0 times [ 95] [ 4] / answers: 1 / hits: 16556 / 6 Years ago, wed, july 11, 2018, 12:00:00

I have an input field <input [email protected] 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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminuniquer

Add To Favorites

Follow

Total Points: 63

Total Questions: 121

Total Answers: 96

Location: Cambodia

Member since Thu, May 21, 2020

4 Years ago

jazminuniquer questions

1 Next.js change locale for the current path that has query, using router

Sat, Nov 20, 21, 00:00, 3 Years ago

1 Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB

Thu, Feb 18, 21, 00:00, 3 Years ago

1 How to get values from client.users.fetch(id) in discord.js

Thu, Sep 3, 20, 00:00, 4 Years ago

1 Apply motion to react component Framer-Motion

Thu, Jun 25, 20, 00:00, 4 Years ago

1 Vuetify - How to select a row data using v-radio-group in v-data-table

Tue, May 19, 20, 00:00, 4 Years ago

View All

answered 6 Years ago ryder · Accepted Answer

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 [email protected]>

Or, without jQuery...

document.getElementById('email').addEventListener('click', moveCursor);

document.getElementById('email').addEventListener('focus', moveCursor);



function moveCursor(event) {

   event.target.setSelectionRange(0, 0);

}

<input type=text placeholder=Enter your name autofocus>

<input type=text id=email [email protected]>