jQuery select text event function – select() method

Filed Under: jQuery

jQuery select() method triggers when a text in the text field or text area is selected. This method attaches a handler, which executes when the selected event is fired.

The syntax for using jQuery select():

  • select()

This signature is used without any arguments

  • select (handler)

The handler is a function, which is executed when the text inside the <text area> or <input type=”text”> gets selected.

jQuery select() function example

Following example demonstrates select() method usage.

jquery-select.html


<!DOCTYPE html>
<html>
<head>
<title>jQuery Select</title>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>

<style>
p {
 color: green;
}
div {
color: red;
}
</style>

</head>
<body>
<p>Select Event Demo </p>
<input type="text" value="Select this text">
<div></div>
<script>
$( ":input" ).select(function() {
$( "div" ).text( "You have selected the text." ).show().fadeOut( 1500 );
});
</script>
</body>
</html>

In this example, you can see that the select() method is triggered when you select the text in the input field. When you select the text, the function attached to the select() method is executed and a text is displayed below the input field and fades out. This is how select() method works in the jquery.

You can try it yourself by selecting the text in the below text box.

Comments

  1. jay says:

    Hi this is not working

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages