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?
+2
A:
$('input[type=text]').keyup(function() {
$(this).val($(this).val().toUpperCase());
});
Gazler
2010-10-04 19:39:12
-1 Only changes after losing focus, not as you type. http://jsfiddle.net/XJKgs/
Greg
2010-10-04 20:22:57
Valid point, should be combined with Brandon's solution to properly change it client side. Changed the code slightly to update on keypress.
Gazler
2010-10-04 20:34:00
I removed my downvote because it now does what the OP asks. But if I were a user of a website that did this "keyup" change, **I'd hunt down the person responsible**. Seeing the letters change as you type is disorienting, and trying to go back to edit what you typed is frustrating because the cursor keeps moving to the end. http://jsfiddle.net/HPapz/1/
Greg
2010-10-04 20:37:52
You are correct hence my comment above, I voted for the CSS solution.
Gazler
2010-10-04 20:58:18
+15
A:
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;
}
Brandon
2010-10-04 19:39:21
You can add a class, or this style, programatically with jQuery if you wish, but this is probably what you need.
Stefan Kendall
2010-10-04 19:42:17
+1, nice, i was also thinking all kinds of jquery / js solutions, but this is better
Michel
2010-10-04 20:16:34
excellent, I had a background image for the input fields I wanted uppercased, and this is PERFECT! THANK YOU!
fgualda87
2010-10-04 20:57:16
@fgualda, I'm afraid I don't know, sorry. It should work. According to the CSS compatibility (http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx) it should be working. I'd suggest asking on doctype.com. They're more likely to be able to help with styling issues.
Brandon
2010-10-06 14:31:56
A:
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
sambomartin
2010-10-04 20:18:02