Quick Tips To Move The Cursor To An Input Field Using JavaScript

Move the Cursor to an Input field using JavaScript

In this tutorial, you will learn how to use focus() and select() to move the Cursor to an input field using JavaScript. Read and practice the instructions below.

Move the Cursor to an input field using JavaScript.

Below, we will show you how to use focus() and select() functions in JavaScript and jQuery.

Using DOM focus() function

Syntax:

element.focus()

Description:

The focus() function moves the pointer to an element.

This approach is the fastest and most straightforward way to move the Cursor to an input field. We just need to call focus() on an input element. Like this:

Script.js:

const btn = document.querySelector('.btn');
const input = document.querySelector('.input-text');

// click button to move the cursor to input
btn.onclick = function () {
  input.focus();
};

And here is the code in the HTML file:

<body>
  <main>
    <a href="#" class="btn">Start typing...</a>
    <input
        class="input-text"
        type="text"
        placeholder="Learn JS programming at learnshareit.com"
    />
  </main>
  <script type="module" src="script.js"></script>
</body>

Output:

Using DOM select() function

Syntax:

element.select()

Description:

Move the mouse pointer to an element and select all selectable things in that element.

Like focus(), select() also moves the mouse pointer to the input field, but the difference is that select() will move the mouse pointer to the input and select all the text in the input. Look at the code sample to see the difference.

Script.js:

const btn = document.querySelector('.btn');
const input = document.querySelector('.input-text');

// click button to move the cursor to input and select text
btn.onclick = function () {
  input.select();
};

Output:

Using focus() function in jQuery

Notice: You must import jQuery before using its functions. You can use CDN to import jquery here.

Syntax:

$(selector).focus(func)

Parameters:

  • func (optional): a callback function will be executed when we focus on an element.

The focus() in jQuery is similar to the focus() in DOM. It will move the mouse pointer to the input field. The strength of focus() in jQuery is that we can perform the action we want when we focus on an element. See the example below to learn how to use focus() in jQuery.

Script.js:

$('.btn').click(function () { 
  // Hide button when focusing on input
  $('.input-text').focus(function () {
    $('.btn').fadeOut('slow');
  });

  // Move cursor to input field
  $('.input-text').focus();
});

Output:

Using select() function in jQuery

Syntax:

$(selector).select(func)

Parameters:

  • func (optional): a function will be executed when we select an element.

The select() in jQuery is like the select() in DOM. It will move the mouse pointer to the input field and select all the text in the input field. The strength of select() in jQuery is that we can perform the action we want with a callback function like the focus() in jQuery.

For example:

Script.js:

$('.btn').click(function () { 
  // Hide button when selecting the input
  $('.input-text').select(function () {
    $('.btn').fadeOut('slow');
  });

  // Move cursor to input and select text
  $('.input-text').select();
});

Output:

Summary

In this article, we have shown you 4 ways to move the Cursor to an Input field using JavaScript. Try to practice each way and choose the one that works best for your situation. If you find the article helpful, don’t forget to share it with your friends.

Thank you for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *