Why isn't this textarea focusing with .focus()? Why isn't this textarea focusing with .focus()? jquery jquery

Why isn't this textarea focusing with .focus()?


javascript jquery focus textarea

A mouse-click on a focusable element raises events in the following order:

  1. mousedown
  2. focus
  3. mouseup
  4. click

So, here's what's happening:

  1. mousedown is raised by <a>
  2. your event handler attempts to focus the <textarea>
  3. the default event behavior of mousedown tries to focus <a> (which takes focus from the <textarea>)

Here's a demo illustrating this behavior:

$("a,textarea").on("mousedown mouseup click focus blur", function(e) {  console.log("%s: %s", this.tagName, e.type);})$("a").mousedown(function(e) {  $("textarea").focus();});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><a href="javascript:void(0)">reply</a><textarea></textarea>
Expand snippet