How to change the input to uppercase as it is being typed

Question

I am using onkeyup="this.value=this.value.toUpperCase();"to change input text value in uppercase. This is working but my need is to change a single letter in input box without using mouse event. If i use left arrow key to move cursor backward onkeyup event gets triggered and the cursor moves to end. How do I modify this script, so that I can navigate backward using arrow keys and modify a text somewhere in between

The current code looks like this...

<h:inputText value="#{_input.response}" autocomplete="off" onmouseover="this.focus();" onkeyup="this.value=this.value.toUpperCase();"/>

Answer 1

How about CSS:

input.upper { text-transform: uppercase; }

Remark: This will still send the value to the server as typed by the user and not uppercased.

Answer 2

You could check what key was pressed in the onkeyup and only process for keys a-z. Should be pretty easy since the keycodes are numeric and you could just check if the keycode is between the keycode for a (65) and z (90).