keyup Uppercase on event

Question

I would like to have an input that would change to upper case on keyup. So I attach a simple event on keyup.

HTML

<input id="test"/>

Javascript (with jQuery)

$("#test").keyup(function(){
  this.value = this.value.toUpperCase();
});

But I found that in Chrome and IE, when you push left arrow, the cursor automatically move to end. I notice that I should detect if the input is letter only. Should I use keycode range or regexp for detection?

Example: http://jsbin.com/omope3

Answer 1

Or you can use the following (this is probably faster and more elegant):

<input style="text-transform: uppercase" type='text'></input>

But that sends the as-typed value back in the form data, so use either of the following to store it as all-caps in the database:

MySQL: UPPER(str)

PHP: strtoupper()