Blur Event Lowercase Demo

Enter uppercase text, then press Tab or click outside the text box.

User ID Submit

Return to tutorial on text box onblur event

JavaScript

const userId = document.getElementById("user-id");

userId.addEventListener("blur", () => {
  userId.value = userId.value.toLowerCase();
});

HTML

<form id="user-form" action="" method="post">
  <label for="user-id">User ID</label>
  <input type="text" id="user-id" name="type" value="Enter USER ID">
  <button type="submit">Submit</button>
</form>