JQuery - OnKeyPress Input Text Title Case

Question

Is there a way to make text inside of input text box to title case each time user pressing their keyboard using a jQuery? example:

johny english

to

Johny English

Here's the input text box

<input type="text" id="fullname" name="fullname" />

Felix · Accepted Answer · 2014-04-28 01:37:10Z

2

You can use pure CSS by applying text-transform property:

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

#fullname { text-transform: capitalize; }

Fiddle Demo

edited Apr 28, 2014 at 1:37

answered Apr 28, 2014 at 1:30

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Syafiq AZ Over a year ago

Thx! Appreciate the simple solution given!

danielson317 Over a year ago

But doesn't this just make it look like the input is capitalized. When the form is submitted it send the original value. Why is this a correct answer?

Malachi Over a year ago

Won't work if all the input is capitalized, since it will ignore all the characters except the first one of each word. (unfortunately....)

Mayank Tripathi · Accepted Answer · 2014-04-28 01:33:01Z

0

http://jsfiddle.net/GH3Lj/

Here you are with css text-transform : capitalize for the purpose.

answered Apr 28, 2014 at 1:33

Mayank Tripathi

1,3621 gold badge8 silver badges21 bronze badges

1 Comment

Syafiq AZ Over a year ago

Woah, what a simple solution. And here I'm trying to find the hard way by using jQuery. Thx!

Collectives™ on Stack Overflow

JQuery - OnKeyPress Input Text Title Case

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related