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:
- “TypeError: form.submit is not a function” in JavaScript
- How To Clear Input Fields After Submit Using JavaScript
- Clear Input fields after Submit using JavaScript
Hi, I’m Cora Lopez. I have a passion for teaching programming languages such as Python, Java, Php, Javascript … I’m creating the free python course online. I hope this helps you in your learning journey.
Name of the university: HCMUE
Major: IT
Programming Languages: HTML/CSS/Javascript, PHP/sql/laravel, Python, Java