3

I have a name input box. I would like to auto-capitalise the first letter of the name as the user types, but allow the user to override the change for names such as "de Salis".

I see here that this is impossible with CSS, because text-transform:capitalize; will capitalise every word and can't be overridden.

A .keyup handler can fix up the first letter as you type, and there are a bunch of solutions found here to do that.

What I can't see how the original capitalisation can be overriden easily. I guess I need a flag, but if the function is one that can be attached to multiple elements, where should the flag live? I could append a DOM element as a flag, but this seems pretty ugly.

A fiddle of the non-override model is found here.

Suggestions?

Community
  • 1
  • 1
Nick
  • 5,995
  • 12
  • 54
  • 78

1 Answers1

3

To have the input box show only the first capital letter, you can use the keyCode directly, as that is always in uppercase format.

That alone will alleviate the requirement for expensive regex and .replace() methods your using.

jQuery:

$('.auto').one('keyup', function(e) {
    $(this).val(String.fromCharCode(e.keyCode));
});

Reference: jsFiddle

The following answer has been revised to include Tab Key requirements, clicking inside of input box and pasting via context-menu, using keyboard paste method (Ctrl + V), and directly typing into it. It does away with the character keyCodes so international support is acknowledged. The jQuery selector was obtained here.

RE-Revised: jsFiddle (Does not force capital letter on submit.)

Community
  • 1
  • 1
arttronics
  • 9,957
  • 2
  • 26
  • 62
  • A slight hitch. If you `tab` into the input box, it fires the function and shoots the cursor across. The other approach is also triggered when you tab in, but it only becomes obvious with the `keyCode` approach because the other way doesn't move the cursor. I'll have to work around this :) – Nick Jul 26 '12 at 10:51
  • See **Status Update** for new jsFiddle. Cheers! – arttronics Jul 26 '12 at 11:31
  • What about my French AZERTY keyboard? When I type an `é` I get a `2` ! ;) – Cyrille Jul 26 '12 at 11:40
  • @Cyrille, I believe my latest jsFiddle should work with international keyboards now. Cheers! – arttronics Jul 26 '12 at 12:37
  • I've accepted following jSweazy's comment above. I suspect, however, that including input in the handler means that it will always revert to a capital when you submit your result. I haven't got time to test it now, though :) – Nick Jul 26 '12 at 22:02
  • Re-revised jsFiddle via removing the `change` selector that was causing submit issue. :-D – arttronics Jul 26 '12 at 23:27
  • Nice work. Another quick question: `.one('input keypress', function...` does the job for my purposes, but `.one('keypress', function...` doesn't work. Why? – Nick Jul 27 '12 at 08:15
  • 1
    Here's more info on [**jQuery .keypress();**](http://api.jquery.com/keypress/) and for `input` review the reference in my answer for where I obtained that entire selector. Cheers! – arttronics Jul 27 '12 at 08:53