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>


Comment 1 written by Scott Stroz on 16 March 2010, at 7:48 AM
Wouldn't it be just as easy to use uCase() on the server side when handling the data?
Comment 2 written by Robert Zehnder on 16 March 2010, at 7:54 AM
Comment 3 written by Danny Scott on 16 March 2010, at 8:00 AM
Replacing the .keyup with a .each and running that bit of script either onsubmit or right before the ajax post (depending on how you're choosing to submit the form) would probably smoother.
Comment 4 written by Raymond Camden on 16 March 2010, at 8:03 AM
Also - there would have been text on the form saying to use caps. By itself, the demo I used doesn't really provide any context for why it is capping stuff.
@Danny: Yeah, I can see how doing it on submit could be a bit nicer.
Comment 5 written by Eric Hynds on 16 March 2010, at 8:14 AM
Comment 6 written by salvatore fusto on 16 March 2010, at 10:23 AM
regards
Comment 7 written by Raymond Camden on 16 March 2010, at 10:25 AM
@Salvatore: That's a good one too. I don't tend to think of CSS as being 'transformative' (if that makes sense), but yeah, that would do it too.
@Eric: That's where Danny's idea of doing it on submit would help out.
Comment 8 written by salvatore fusto on 16 March 2010, at 10:38 AM
imho this rule is not transformative: uppercase can be viewed as a property such as bold, underline, size, font etc.
bye
Comment 9 written by Raymond Camden on 16 March 2010, at 10:45 AM
Comment 10 written by salvatore fusto on 16 March 2010, at 11:05 AM
yes, you could be right, if you think about that submitted value has to be persisted in a case sensitive db.
But there is another aspect: if later on you want to cancel input's capitalization, you have only to cancel a css attribute, without updating any js code or html script.
best regards
Comment 11 written by Alan McCollough on 16 March 2010, at 11:56 AM
Now, if there is a business case for displaying the input in ALL CAPS, that's another issue...
Comment 12 written by Raymond Camden on 16 March 2010, at 11:58 AM
Heh, who knew such a small little post would be so controversial! ;)
Comment 13 written by Robert Zehnder on 16 March 2010, at 12:04 PM
Comment 14 written by Ken on 16 March 2010, at 1:24 PM
Comment 15 written by Dan Fredericks on 17 March 2010, at 6:27 AM
Who knew this simple question would generate so much information. This was my question. The original system was a desktop app so the system was able to set the caps lock to on if the user was in the application. I am converting it to CF and need to mimic as best as possible that same function.
I see I could use CSS to do this for viewing and then ucase on the server side to insert it into the db. I see a JQuery solution, however, since this is AJAX, my company and the specific Gov't group has not approved AJAX as a viable option...something about it not being secure enough or something...IE 6 is still their standard browser so my life is still a bit hard :)
If there are more ideas, please keep posting them, if not, I thank Ray for posting this, and I thank you all for the many ideas.
Comment 16 written by salvatore fusto on 17 March 2010, at 9:43 AM
1) toggle a ccs class to text-transform for the upper/lower case on the client;
2) alerting with a message if caps lock is on or off;
3) use this control (the one toggling text-transform) of the form on server side to determine action on the inout value.
you can add a toggle control on every input too.
@Ray: what about changing in your code the keyup event with the change one?
super regards
Comment 17 written by Raymond Camden on 17 March 2010, at 9:51 AM
Comment 18 written by Chris Dawes on 20 March 2010, at 1:55 AM
just loop over the fields using for form.fieldnames on your backend submit page before you do anything.. and use UCASE(), as javascript can fail for many reasons... including other functions on the page causing scripts to be turned off.
Elso why not use ExtJS since it's built in? Why JQuery?
Comment 19 written by Raymond Camden on 20 March 2010, at 1:03 PM
[Add Comment] [Subscribe to Comments]