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:
1 <form>
2 Name: <input type="text" name="name"><br/>
3 Email: <input type="text" name="email"><br/>
4 </form>
I then whipped up this simple jQuery:
2 Name: <input type="text" name="name"><br/>
3 Email: <input type="text" name="email"><br/>
4 </form>
1 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
2 <script>
3 $(document).ready(function() {
4 $("input").keyup(function() {
5 var val = $(this).val()
6 $(this).val(val.toUpperCase())
7 })
8 })
9 </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.
2 <script>
3 $(document).ready(function() {
4 $("input").keyup(function() {
5 var val = $(this).val()
6 $(this).val(val.toUpperCase())
7 })
8 })
9 </script>
The code behind this is fairly trivial. I've got a file I include to generate my chart data. Normally this would be a proper database query. The main template's code consists of: