Auto Capitalization
Noun. Autocapitalization (uncountable): The automatic capitalization of words by a word processor, such as at the beginning of a sentence.
In this article, we are going to learn how JavaScript helps us implement the auto-capitalization feature in a textbox, with the help of HTML and CSS.
Step-By-Step Guide
HTML: We start by setting up the HTML file which will contain a division for the textbox where the users can input text. The HTML file will also link to the CSS and JavaScript files. The HTML file is saved as ‘index.html’.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Capitalize Text Box</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Auto-Capitalization</h1>
<textarea id="textBox" placeholder="Type here..."></textarea>
</div>
<script src="script.js"></script>
</body>
</html>
CSS: CSS stands for Cascading Style Sheets. It’s a stylesheet language used to add layout and visual effects to HTML elements. A ‘style.css’ file is created to style the text box and page.
body {
font-family: "Lucida Console", "Courier New";
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
background-image: url('./bg.jpeg');
background-size: cover;
background-position: center;
}
.container {
text-align: center;
color: rgb(24, 15, 59);
}
textarea {
width: 300px;
height: 150px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
resize: none;
background-color: rgb(255, 255, 255);
color: rgb(24, 15, 59);
}
textarea:focus {
border-color: #007BFF;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
Here, we see the different properties of the text, text boxes and background we can work with to customise the HTML page.
JavaScript: A JavaScript file named ‘script.js’ is created. This files contains the logic for auto-capitalization of the text. The script listens for input events on the text area where the user types and converts the text to uppercase simultaneously.
document.addEventListener('DOMContentLoaded', () => {
const textBox = document.getElementById('textBox');
textBox.addEventListener('input', () => {
textBox.value = textBox.value.toUpperCase();
});
});
Let’s understand what exactly is taking place in these lines of code: The JavaScript file contains an event listener that detects when the user types in the text box which is known as the input event. Each time the user types, the script converts the text to uppercase using the toUpperCase() method and updates the text box value.
Implementation
- Save the HTML, CSS and JavaScript files as ‘index.html’, ‘style.css’, ‘script.js’ respectively.
- Run the ‘index.html. file on a browser.
- Type any text in the text box to see your text automatically get converted to uppercase as you type.
Output
Conclusion
Auto-capitalizing text in a text box is a useful feature for many web applications, as it helps ensure that user input is consistently formatted. By using HTML, CSS, and JavaScript, you can easily add this feature to any website and enhance the user experience. This example provides a simple implementation, but you can tailor and expand it to fit your specific needs.