How to make everything in a textfield be capital letters / uppercase?

Question

I want to make everything I write in a textfield to be capital letters. As I write, not after losing focus.

How do I do this using jQuery?

Answer 1

I would use CSS for this.

Just add text-transform: uppercase to your styling, and then on the server side you can convert it to uppercase.

input {
  text-transform: uppercase;
}

Answer 2

$('input[type=text]').keyup(function() {
    $(this).val($(this).val().toUpperCase());
});

Answer 3

Use
oninput='this.value=this.value.toUpperCase();
This event is just for such cases, is fired after user input (pressing key) but before updating (displaying value), so with this typed text won't flicker while converting, and value is also correct (not like using only style to alter display without changing real data).

Answer 4

You may need to use combination of these.

using the text-transform style only renders the type in upper-case, although the value may well be lower case.

The javascript will only change current text to upper once the field changes or focus is lost

you can use gazler's jquery or simply inline javascript

e.g. onblur='javascript:this.value=this.value.toUpperCase();'

This means that the text value will appear uppercase and actually be uppercased when the value changes / control loses focus.

HTH Sam

Answer 5

To build on @Gazler's answer, an enhanced solution that better handles modifier keys ( assuming that you have a placeholder of mixed case and cannot set text-transform: uppercase; ):

$('.search-input input[type=text]').keyup(function() {
    var v = $(this).val();
    var u = v.toUpperCase();
    if( v != u ) $(this).val( u );
})