9
votes

Comment changer l'entrée en majuscule comme en cours de dactylographie

J'utilise onKeyup = "this.value = this.value.touppercase ();" code> pour modifier la valeur du texte d'entrée en majuscule. Cela fonctionne mais mon besoin est de modifier une seule lettre dans la zone de saisie sans utiliser d'événement de souris. Si j'utilise la touche fléchée gauche pour déplacer le curseur en arrière, l'événement en bonneyup est déclenché et le curseur passe à la fin. Comment puis-je modifier ce script, de sorte que je puisse naviguer en arrière à l'aide des touches fléchées et modifier un texte quelque part entre

Le code actuel ressemble à celui-ci ... p>

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


3 commentaires

Serait beaucoup plus facile si vous le faites sur l'événement Element BLUR.


En tant qu'utilisateur final, je suis heureux de ne pas utiliser votre demande d'autre, je devrais alors arrêter de l'utiliser si cela faisait des choses comme ça !! Je trouve cela le plus irritant quand je tape pour le faire changer sur moi. Si vous avez besoin de la valeur en majuscule, faites-le après que j'envoie / soumettre, etc. - pourquoi pester mon quand je tape? Je ne dois pas sûr que ce que vous faites viole une certaine règle cardinale / loi du bâtiment logiciel, mais s'il n'y a pas, IMHO, il devrait y en avoir une sur ces lignes.


Accepté avec Sane. Je continuerais probablement à frapper ma clé Capslock aussi, à tourner de ces capuchons ennuyeux: P


5 Réponses :


28
votes

Que diriez-vous de CSS:

input.upper { text-transform: uppercase; }


4 commentaires

Je ne sais pas si l'entrée restera en majuscule. Est-ce juste un tour de style ou le texte se transforma-t-il en majuscule (disons si vous écrivez le contenu du formulaire dans une base de données)?


Style IT-majuscule, puis modifiez-le Serveride lorsque vous le recevez.


Vous devrez quand même majuscule sur le serveur. Si JS est éteint et que vous vous fiez à majuscule, vous devez le vérifier sur le serveur.


Pour avoir une valeur majuscule côté serveur peut être utilisée simple JSF Convertisseur , attaché à un composant.



0
votes

Vous pouvez vérifier quelle est la touche enfoncée dans le processus ONKEUP et uniquement pour les clés A-Z. Devrait être assez facile car les codes clés sont numériques et vous pouvez simplement vérifier si le code-clés est compris entre le code-clés d'un (65) et Z (90).


0 commentaires

0
votes

Comme Kristoffer dit, il est probablement préférable d'utiliser le style et de convertir les server. Il y a aussi un plugin JQuery pour forcer les majuscules: 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>


0 commentaires

3
votes

Un échantillon pourrait être:

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


1 commentaires

Bienvenue à So Juan. Au lieu d'essayer d'avoir un rendu agréable pour << / code> & > Vous devez ajouter 4 espace pour mettre en surbrillance le code ou les mettre entre `.



-2
votes

bootstrap 3 a des classes de transformation qui transforment le texte dans des composants avec des classes de capitalisation de texte.

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


0 commentaires