How to change the input to uppercase as it is being typed

Question

I am using onkeyup="this.value=this.value.toUpperCase();"to change input text value in uppercase. This is working but my need is to change a single letter in input box without using mouse event. If i use left arrow key to move cursor backward onkeyup event gets triggered and the cursor moves to end. How do I modify this script, so that I can navigate backward using arrow keys and modify a text somewhere in between

The current code looks like this...

<h:inputText value="#{_input.response}" autocomplete="off" onmouseover="this.focus();" onkeyup="this.value=this.value.toUpperCase();"/>

Would be much easier if you did this on the element blur event. — Ben Everard, Sep 16 '10 at 08:33
As an end user, I am glad i do not use your application else i would then have to stop using it if it did things like this!! I find it MOST irritating when i am typing to have it change on me. If you need the value in uppercase, do it after i send / submit etc - why pester my when i am typing? I aint sure if what you are doing violates some cardinal rule / law of software building but if there isnt, IMHO, there should be one on these lines. — Jagmag, Sep 16 '10 at 08:35
Agreed with In Sane. I'd probably keep hitting my capslock key too, to turn of those annoying caps :P — Stephan Muller, Sep 16 '10 at 08:37

score 28 · Accepted Answer · answered Sep 16 '10 at 08:34

28

How about CSS:

input.upper { text-transform: uppercase; }

Remark: This will still send the value to the server as typed by the user and not uppercased.

answered Sep 16 '10 at 08:34

Darin Dimitrov

1,023,142
271
3,287
2,928

I'm not sure if the input will stay uppercase actually. Is it just a style trick or does the text actually transform into uppercase (say if you write the form's contents into a database)? – Stephan Muller Sep 16 '10 at 08:36
3

Style it uppercase, then change it serverside when you receive it. – Kristoffer Sall-Storgaard Sep 16 '10 at 08:45
2

You will have to uppercase it on the server anyway. If JS is turned off and you rely on uppercase, you must verify it on the server – mplungjan Sep 16 '10 at 08:59
1

For having server-side uppercase value can be used simple jsf [Converter](http://javaserverfaces.java.net/nonav/docs/2.0/javadocs/javax/faces/convert/Converter.html), attached to a component. – Tsimon Dorakh Apr 02 '13 at 06:52

score 3 · Answer 2 · edited Sep 23 '12 at 22:35

3

A sample could be:

<p:inputText id="nombres" 
             value="#{userController.user.nombres}" 
             style="text-transform: uppercase" />

edited Sep 23 '12 at 22:35

Juan Cortés

20,634
8
68
91

answered Sep 05 '12 at 15:41

Juan

31
2

Welcome to SO Juan. Instead of trying to have a nice render for `<` & `>` you should add 4 space to highlight the code or put them between `. – j0k Sep 05 '12 at 15:46

score 0 · Answer 3 · answered Sep 16 '10 at 08:36

0

You could check what key was pressed in the onkeyup and only process for keys a-z. Should be pretty easy since the keycodes are numeric and you could just check if the keycode is between the keycode for a (65) and z (90).

answered Sep 16 '10 at 08:36

JDT

477
1
5
17

score 0 · Answer 4 · answered Mar 11 '11 at 10:38

Like kristoffer says, probably best to use the style, and convert serverside. There's also a jQuery plugin to force uppercase: http://plugins.jquery.com/plugin-tags/uppercase

<html>
    <head>
        <style>
            input.upc { text-transform: uppercase; }
        </style>
        <script>
            // thanks 2 'm2pc' : http://www.webdeveloper.com/forum/showpost.php?s=9f258cba84d461026bb9ed478e86776d&p=423545&postcount=3
            function doGetCaretPosition (oField) {
                var iCaretPos = 0;
                if (document.selection) // IE Support
                    {
                    oField.focus ();
                    var oSel = document.selection.createRange ();
                    // Move selection start to 0 position
                    oSel.moveStart ('character', -oField.value.length);
                    // The caret position is selection length
                    iCaretPos = oSel.text.length;
                    }
                else
                    if (oField.selectionStart || oField.selectionStart == '0') // Firefox support
                        iCaretPos = oField.selectionStart;
                return (iCaretPos);
                }
            function doSetCaretPosition (oField, iCaretPos)
                {
                if (document.selection) // IE Support
                    {
                    oField.focus ();
                    var oSel = document.selection.createRange ();
                    oSel.moveStart ('character', -oField.value.length);
                    oSel.moveStart ('character', iCaretPos);
                    oSel.moveEnd ('character', 0);
                    oSel.select ();
                    }
                else
                    if (oField.selectionStart || oField.selectionStart == '0') // Firefox support
                        {
                        oField.selectionStart = iCaretPos;
                        oField.selectionEnd = iCaretPos;
                        oField.focus ();
                        }
                }
            function forceupper(o)
                {
                var x = doGetCaretPosition(o);
                o.value=o.value.toUpperCase();
                doSetCaretPosition(o,x);
                }
        </script>
    </head>
    <body>
        <form method="get" target="#">
            Fld 1 : browser shows upper-case, form submits mixed-case<br>
            <input name="f1" id="idf1" class="upc" type="text" value="X"><br>
            Fld 2 : javascript updates text to uppercase, form submits uppercase<br>
            <input name="f2" id="idf2" class="js" type="text" value="Y" onkeyup="forceupper(this);"><br>
            <input type="submit" value="send">
        </form>
    </body>
</html>

score -2 · Answer 5 · answered May 28 '17 at 05:05

-2

bootstrap 3 has transformation classes which transform text in components with text capitalisation classes.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

answered May 28 '17 at 05:05

Poorna Rao

335
4
20

How to change the input to uppercase as it is being typed

5 Answers5

Linked

Related