How to uppercase a text by using jQuery
In this article, you are going to learn about how to uppercase a text by using jQuery.
jQuery is a lightweight and feature-rich JavaScript library. The purpose of jQuery is to write less and do more. That means you can do a lot more things by writing less code. In jQuery, you can convert a text into uppercase. For example, a user gives input as lowercase or whatever he/she wants and the text will automatically convert into uppercase. We will see that in this article but first let’s see how you can convert a text from lowercase to uppercase by using JavaScript.
let data = 'Good Moring!'
let convertData = data.toUpperCase()
console.log(convertData)
//Output: GOOD MORING!You can see that our output is converted into uppercase. In JavaScript, there’s a function named toUpperCase() that will let you perform to convert a text into the uppercase form.
we have already known that we can bring interactivity by using jQuery. Now let’s see the below program of how a user input text can be converted in jQuery. See the following steps.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>jQuery Uppercase</title>
</head>
<body>
<div class="element">
<h1>jQuery Uppercase</h1>
<input id= "data" type="text">
</div>
<script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js>" ></script>
<script src="app.js"></script>
</body>
</html>Here, we simply take an input field and link the jQuery and our own app.js file. We also link style.css file to give it a better look. But it is optional and not so important. You can use styles based on your own interest.
JavaScript
$(document).ready(function(){
$('#data').keyup(function(){
$(this).val($(this).val().toUpperCase());
});
});
here, we simple add the functionality for uppercasing the text input. To do so we have used toUpperCase(). Let’s see the out in the below section.
Output
You can see in the output that the text is showing in the uppercase form. We input our text in lowercase form but it converting into uppercase and this is how you can uppercase an input text by using jQuery.