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: