Programming Tutorials

HTML Text onBlur() onFocus() onSelect() onChange() using JavaScript

By: aathishankaran in JavaScript Tutorials on 2007-03-27  

In JavaScript, the following are the common event handlers for handling text input:

1. onblur: The onblur event occurs when an element loses focus, and is often used to validate form inputs.

Example:

<input type="text" id="myInput" onblur="validateInput()">

<script>
function validateInput() {
  var input = document.getElementById("myInput");
  if (input.value === "") {
    alert("Input cannot be empty");
  }
}
</script>

2. onchange: The onchange event occurs when the value of an element changes, and is often used to perform an action when a user selects an option from a dropdown list.

Example:

<select id="mySelect" onchange="changeColor()">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

<script>
function changeColor() {
  var select = document.getElementById("mySelect");
  var color = select.value;
  document.body.style.backgroundColor = color;
}
</script>

3. onselect: The onselect event occurs when a user selects text in an input field or textarea, and is often used to perform an action on the selected text.

Example:

<textarea id="myTextarea" onselect="highlightText()"></textarea>

<script>
function highlightText() {
  var textarea = document.getElementById("myTextarea");
  var selectedText = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd);
  alert("Selected text: " + selectedText);
}
</script>

4. onfocus: The onfocus event occurs when an element gains focus, and is often used to perform an action when a user clicks on an input field or textarea.

Example:

<input type="text" id="myInput" onfocus="showHint()" onblur="hideHint()">
<div id="hint" style="display: none;">Enter your name</div>

<script>
function showHint() {
  var hint = document.getElementById("hint");
  hint.style.display = "block";
}

function hideHint() {
  var hint = document.getElementById("hint");
  hint.style.display = "none";
}
</script>

These are just a few examples of how to handle text input events in JavaScript. There are many more events and event handlers that can be used to create dynamic and interactive web applications.