HTML onselect Attribute

Introduction

The onselect attribute is an inline event handler that runs JavaScript when the select event fires — when the user highlights text inside an <input> or <textarea>. Use it to show selection counts, enable a “format selection” button, validate highlighted content, or provide contextual help. Read the selection with selectionStart, selectionEnd, and value.substring(). For selections anywhere on the page, use document.selectionchange or window.getSelection() instead. Prefer addEventListener("select", …) in production.

What You’ll Learn

Purpose of onselect Attribute

The primary purpose of onselect is to react when the user selects (highlights) text inside a form control — so your page can show how many characters are selected, reveal formatting tools, or run validation on the highlighted portion only.

The select event fires on the element where the selection occurs. It does not fire when the user copies text — use oncopy for clipboard actions — and it does not apply to arbitrary page content outside inputs and textareas.

📝 Syntax

Set onselect on an <input> or <textarea>, or assign element.onselect in JavaScript:

<input type="text" onselect="handleSelection()">

<textarea onselect="handleSelection()"></textarea>

<script>
  field.onselect = handleSelection;
  field.addEventListener("select", handleSelection);
</script>

Syntax Rules

• Value is JavaScript executed when the select event fires.
• Works on text-like <input> types and <textarea>.
• Fires when the user highlights text with mouse or keyboard.
• Read selection with selectionStart and selectionEnd.
• Also assignable as element.onselect in script.
• Modern alternative: addEventListener("select", handler).
• For page-wide selection, use document.addEventListener("selectionchange", …).

💎 Values

The onselect attribute accepts a string of JavaScript code:

• onselect="handleSelection()" — Call a named function.
• onselect="showCount()" — Display selected character count.
• JavaScript: input.onselect = () => { … } — property assignment.

function handleSelection() {
  var start = field.selectionStart;
  var end = field.selectionEnd;
  var selected = field.value.substring(start, end);
  count.textContent = selected.length + " characters selected";
}

field.addEventListener("select", handleSelection);

Applicable Elements

onselect vs oncopy vs selectionchange

Examples Gallery

Textarea inline handler, dynamic assignment, and selected character count with addEventListener.

<textarea onselect="showSelection()">Select some text here</textarea>
<p id="status"></p>

<script>
  function showSelection() {
    document.getElementById("status").textContent = "Text selected!";
  }
</script>

<script>
  document.getElementById("dynamicInput").onselect = function () {
    log.textContent = "Text selected dynamically!";
  };
</script>

field.addEventListener("select", function () {
  var len = this.selectionEnd - this.selectionStart;
  var text = this.value.substring(this.selectionStart, this.selectionEnd);
  count.textContent = len + " chars: \"" + text + "\"";
});

♿ Accessibility

• Do not block selection — Never use CSS user-select: none on content users need to copy.
• Keyboard selection — Support Shift+arrow keys; test that select fires for keyboard users.
• Announce changes — Use aria-live="polite" when selection count updates.
• Visible focus — Ensure inputs and textareas have clear focus styles before selection.
• Respect user intent — Avoid intrusive popups immediately on every text highlight.

💡 Best Practices