How to select all on focus in input using JQuery?
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:
$("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="
">
</ 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"
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 >
|
Output:
Last Updated :
31 Oct, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...