How to select all on focus in input using JQuery?
Last Updated :
31 Oct, 2019
Improve
The select() event is applied to an element using jQuery when the user makes a text selection inside an element or on focus the element. This event is limited to some fields.
Syntax:
html
Output:
$("selected element").select();
//Select all Input field on focus
$("input").select();
//Select Input field on focus whose type="text"
$("input[type='text']").select();
//Select input field using its id="input-field"
$("#input-field").select();
Example:
In below example, select all made on input element of the form using focus, focus and click event.
<!DOCTYPE html>
<html>
<head>
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
">
</script>
<style>
input {
margin: 12px;
}
::-moz-selection {
/* Code for Firefox */
color: white;
background: red;
}
::selection {
color: white;
background: red;
}
</style>
</head>
<body align="center">
<form action="/action_page.php"
autocomplete="off">
First name:
<input type="text"
name="fname"
value="Geeks"
required>
<br> Last name:
<input type="text"
name="lname"
value="forGeeks"
required>
<br> E-mail:
<input type="email"
name="eid"
value="carear@geeksforgeeks.org" />
<br> Password:
<input type="password"
name="upwd"
value="********"
required maxlength="8">
<br> User Age:
<input type="number"
name="Test"
min="10"
value="24"
max="80"
required/>
<br> Your web Profile:
<input type="url"
name="Test"
value="http://geeksforgeeks.org"
required />
<br>
<input type="submit" value="Submit">
</form>
<script>
$("input[type='text']").on("click", function() {
$(this).select();
});
$("input").focus(function() {
$(this).select();
});
$("input").focusin(function() {
$(this).select();
});
</script>
</body>
</html>
