jQuery Select Event

What You’ll Learn

The select event fires when the user highlights text inside an <input> or <textarea> — not when they change the value, and not on dropdown <select> elements. This tutorial covers .on("select"), eventData, .trigger("select"), reading selected text, comparison with change and click, and the official jQuery API demos.

Introduction

Rich text editors, copy-to-clipboard buttons, and formatting toolbars often need to know when the user highlights a word or phrase. The select event is the browser signal for “the user just selected text inside this field.”

The official jQuery API distinguishes the select event (bound with .on("select") since 1.7) from the deprecated .select() method. To programmatically run select handlers — and select all text in the field — use .trigger("select") since jQuery 1.0.

Understanding the select Event

The select event is sent to an element when the user makes a text selection inside it. It applies to text <input> fields and <textarea> boxes — not checkboxes, radios, or <select> dropdowns.

Placing the cursor without highlighting text does not fire select. The user must select one or more characters — typically by click-dragging, double-clicking a word, or using Shift+arrow keys. Each new selection inside the same field can fire the event again.

📝 Syntax

The modern jQuery API for the select event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("select" [, eventData ], handler) (since 1.7)

.on( "select" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time select fires: function( event ) { ... }.

2. Event delegation — .on("select", selector, handler)

$( "#editor" ).on( "select", "textarea", function( event ) {
  // runs when user highlights text in any textarea inside #editor
} );

3. Trigger the event — .trigger("select") (since 1.0)

.trigger( "select" )

• Runs bound select handlers on the matched element(s).
• Also fires the default action — typically selects all text in the field.

4. Unbind — .off("select" [, selector] [, handler])

$( "#target" ).off( "select" );              // remove all select handlers
$( "#editor" ).off( "select", "textarea", fn ); // remove delegated handler

Official jQuery API examples

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

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

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false.

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 extend the official :input demo, selected-text length display, and eventData. Use the Try-it links to run each snippet in the browser.

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

Click-drag to highlight text in #target → alert runs

Click to place cursor only (no highlight) → no alert

Double-click a word → alert runs (word selected)

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

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

Highlight text manually → alert runs

Click #other → trigger("select") → alert runs again

Entire #target text becomes selected (default action)

$( ":input" ).on( "select", function() {
  $( "#notice" ).text( "Something was selected" ).show().fadeOut( 1000 );
} );

Highlight text in any input or textarea on the page
→ #notice shows "Something was selected", fades over 1s

Matches the official jQuery API Example 1 demo

$( "#bio" ).on( "select", function() {
  var el = this;
  var len = el.selectionEnd - el.selectionStart;
  var text = $( el ).val().substring( el.selectionStart, el.selectionEnd );
  $( "#stats" ).text( len + " chars selected: "" + text + """ );
} );

Highlight "Hello" in textarea → "5 chars selected: "Hello""

#stats updates on each new selection

Cross-browser note: selectionStart/End work on inputs and textareas

$( "#editor" ).on( "select", { toolbar: "basic" }, "textarea", function( event ) {
  var len = this.selectionEnd - this.selectionStart;
  if ( len > 0 ) {
    $( "#toolbar" ).text( "Toolbar: " + event.data.toolbar + " | " + len + " chars highlighted" ).show();
  } else {
    $( "#toolbar" ).hide();
  }
} );

Highlight text in textarea → #toolbar appears with event.data.toolbar

Click without selection → toolbar hides

Delegated select on #editor covers nested textareas

🚀 Common Use Cases

• Copy / share selection — enable a “Copy quote” button when the user highlights text in a textarea.
• Formatting toolbar — show bold, italic, or link controls when characters are selected.
• Character limits — warn if the user selects more characters than a paste limit allows.
• Analytics — log which phrases users highlight in feedback forms.
• Select-all button — $("#field").trigger("select") runs handlers and selects all text.
• Contextual help — show a definition popup for the highlighted word.

📝 Notes

• Bind with .on("select", handler) since jQuery 1.7 — not the deprecated .select(handler) method.
• Trigger with .trigger("select") since jQuery 1.0 — also performs default select-all action.
• Limited to text <input> and <textarea> — not <select> dropdowns.
• Cursor placement alone does not fire select — user must highlight characters.
• Getting selected text differs by browser — use selectionStart/selectionEnd on inputs or plugins for complex cases.
• Not the same as the HTML <select> element — that uses change when options change.
• Use .off("select") to remove handlers — avoid deprecated .unbind("select").

💡 Best Practices