JavaScript Tip - Auto Capitalizing

This post is more than 2 years old.

A reader asked me an interesting question yesterday. His system required all form input to be in capital letters. He wanted to know if there was a way to force the caps lock key to be abled on the client machine. As far as I know, this isn't possible. You can detect the status of the caps lock key, but actually enabling it is not something you can do via JavaScript. However, it is pretty trivial to simply automatically capitalize the user's input. Here is one simple example in jQuery.

I began with a simple form containing two inputs:

<form> Name: <input type="text" name="name"><br/> Email: <input type="text" name="email"><br/> </form>

I then whipped up this simple jQuery:

<script type="text/javascript" src=""></script> <script> $(document).ready(function() { $("input").keyup(function() { var val = $(this).val() $(this).val(val.toUpperCase()) }) }) </script>

This code binds to all input fields on the page. I'd probably filter it to a particular FORM ID normally, but this works fine. I listened for the keyup event and simply took the entire val and converted it to upper case. You can see a demo of this here. Not terribly exciting, but it works, as long as JavaScript is enabled of course.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA