select event

Categories: Events > Form Events | Forms
Bind an event handler to the "select" event, or trigger that event on an element.

Contents:

.on( "select" [, eventData ], handler )Returns: jQuery

Description: Bind an event handler to the "select" event.

This page describes the select event. For the deprecated .select() method, see .select().

The select event is sent to an element when the user makes a text selection inside it. This event is limited to <input type="text"> fields and <textarea> boxes.

For example, consider the HTML:

1
2
3
4
5
6
 
<form>
  <input id="target" type="text" value="Hello there">
</form>
<div id="other">
  Trigger the handler
</div>

The event handler can be bound to the text input:

1
2
3
 
$( "#target" ).on( "select", function() {
  alert( "Handler for `select` called." );
} );

Now when any portion of the text is selected, the alert is displayed. Merely setting the location of the insertion point will not trigger the event. To trigger the event manually, use .trigger( "select" ):

1
2
3
 
$( "#other").on( "click", function() {
  $( "#target" ).trigger( "select" );
} );

After this code executes, clicks on the Trigger button will also alert the message:

Handler for `select` called.

In addition, the default select action on the field will be fired, so the entire text field will be selected.

The method for retrieving the current selected text differs from one browser to another. A number of jQuery plug-ins offer cross-platform solutions.

Examples:

To do something when text in input boxes is selected:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>on demo</title>
  <style>
  p {
    color: blue;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>
<body>
 
  <p>Click and drag the mouse to select text in the inputs.</p>
  <input type="text" value="Some text">
  <input type="text" value="to test on">
  <div></div>
 
<script>
$( ":input" ).on( "select", function() {
  $( "div" ).text( "Something was selected" ).show().fadeOut( 1000 );
} );
</script>
 
</body>
</html>

Demo:

To trigger the select event on all input elements, try:

1
 
$( "input" ).trigger( "select" );