JSFiddle - React, Tailwind, and code Playground

by ariacomponents

HTML

<textarea spellcheck="false">1. Focus this textarea.
2. click the button.

Result: focus is not lost
</textarea>
<button id="myButton">button</button>
<div id="results"></div>

CSS

button {
  display: block;
  margin-top: 1em;
}

textarea {
  width: 300px;
  height: 100px
}

textarea:focus {
  outline-color: blue;
}

button:active, textarea:active {
  background-color: #f0f000;
}

#results {
  margin-top: 1em;
  font-size: 11px;
  margin-left: 1em;
}

JavaScript

// Keep the focus, if the button is clicked.

$("#myButton").mousedown(function(e) { // handle the mousedown event
	e.preventDefault(); // prevent the textarea to loose focus!
});    



// EVENT LOGGING ----------------------------------------------------------------

$("#myButton").mousedown(function(e) {
	$("#results").append("mousedown<br>");
});  
$("textarea").blur(function() {
    $("#results").append("textarea lost focus<br>");
});

$("textarea").focus(function() {
    $("#results").append("textarea is focused<br>");
});