Convert Lowercase To Uppercase In JavaScript

Lowercase To Uppercase Letters

This tutorial will show you how to convert letters from lowercase to uppercase using JavaScript’s onkeyup event. There is an input box where you will type and onkeyup JavaScript event will call a custom function which will convert the lowercase letters to uppercase letters.

onkeyup means as you type the function will be called and the lowercase letter will be converted instantly to uppercase letter.

Prerequisites

Knowledge of JavaScript

Lowercase To Uppercase Conversion

Here is the following JavaScript code in the HTML file. The function convertToUppercase() will be invoked on JavaScript’s key-up event, means, when you release a key from your keyboard and the required logic will be fired in the convertToUppercase() function.

<!doctype html>
<html>
	<head>
		<script type="text/javascript">
			function convertToUppercase() {
				document.getElementById('output').innerHTML = document.getElementById('input').value.toUpperCase()
			}
		</script>
	</head>
	<body>
		<div>Enter lowercase letters to convert to uppercase letters</div>
		<p>
			<input type="text" id="input" onkeyup="convertToUppercase()"/>
		</p>
		<p id="output"/>
	</body>
</html>

In the above code, I have written a function convertToUppercase() which will get the input letter as you type and write to a paragraph instantly.

If you type uppercase letter there will be no change and uppercase letter will be displayed.

Testing Lowercase To Uppercase

Here is the output of lowercase word hello as HELLO:

javascript lowercase to uppercase

Source Code

Download

Leave a Reply

Your email address will not be published. Required fields are marked *