Convert Text to Lowercase with the JavaScript Blur Event
Table of Contents
The blur event fires when an element loses focus. A common teaching example is normalizing a user ID to lowercase after the visitor tabs or clicks away from the field.
The text conversion uses toLowerCase(). For real login systems, normalize identifiers consistently on both client and server; do not depend on client-side JavaScript for security or identity matching.
demo of the text box onBlur event.
Use the Blur Event Top ↑
const userId = document.getElementById("user-id");
userId.addEventListener("blur", () => {
userId.value = userId.value.toLowerCase();
});
<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>
Complete Working Source Top ↑
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo onBlur textbox input</title></head>
<body>
<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>
<script>
const userId = document.getElementById("user-id");
userId.focus();
userId.addEventListener("blur", () => {
userId.value = userId.value.toLowerCase();
});
</script>
</body>
</html>
Other onBlur Conversion Examples Top ↑
Feet to Meter and vice versa Inches to CM and vice versa
Event Handling onKeyPress Mouse event Textarea onClick event onKeyDown Mouse event
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
