JavaScript Tip - Auto Capitalizing

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.

Like This?

If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can also subscribe to the email feed to get notified of new posts.