Question

Currently I am trying to force uppercase in a textbox in a javascript method. This method is set to be called on a ‘keypress’ event to go into a textbox.

Here is my method to change to uppercase with IE and FF detection.

          //some code to detect the kind of key pressed based on numeric value, 
          //if lowercase detected then continue

        var key; 
        if(window.event){ //working IE code                     
                //key = window.event.keyCode;
                window.event.keyCode-=32;
        }

        else if(e){ //broken FF code
                key = String.fromCharCode(keycode).toUpperCase()
                e.value = e.value.toUpperCase();
        }

This current code says e.value is undefined in firebug. If i try just e.toUpperCase() firebug says toUpperCase does not exist. I have tried setting e.value equal to ‘key’, which returns no errors but does not change to uppercase. I have tried directly changing e.which but of course, that is read only and returns an error saying such.

What exactly am I missing here? I believe that the problem is no matter what I change here, e.which is STILL set as the lowercase value, and because I can’t edit it in any way, the original lowercase e.which character is getting pushed to the textbox.

Answer 1

I think I would do this another way:

function keypressHandler() {
  this.value = this.value.toUpperCase();
}

document.getElementById('whatever').onkeypress = keypressHandler;
// or use addEventListener or whatever

edit actually it works a little better with the following hack:

function keypressHandler(event) {
    var inp = this;
    setTimeout(function() {
        inp.value = inp.value.toUpperCase();
    }, 0);
}

That lets the key that caused the event get added to the value before the value is “fixed”.

The point is that handling keyboard events is pretty messy and things vary between browsers. The approach above avoids that entirely by simply working directly on the value, which is maintained by the browser.

edit — note that for the code here to work, the event handler has to be set up the way this code does it. If you set it in the “onkeypress” attribute in the HTML markup, it’d have to be different:

<input onkeypress='keypressHandler.call(this)'>