Question

我使用onkeyup="this.value=this.value.toUpperCase();"以大写形式更改输入文本值。这是有效的，但我需要在不使用鼠标事件的情况下更改输入框中的单个字母。如果我使用左箭头键向后移动光标onkeyup事件被触发并且光标移动到结束。如何修改此脚本，以便我可以使用箭头键向后导航并在两者之间的某处修改文本

目前的代码看起来像这样......

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

Answer 1

CSS怎么样：

input.upper { text-transform: uppercase; }

备注：这仍然会将值发送给用户输入的服务器，而不是大写的。

Answer 2

样本可以是：

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

Answer 3

您可以检查onkeyup中按下了哪个键，只处理键a-z。应该很简单，因为键码是数字的，您可以检查键码是否在（65）和z（90）的键码之间。

Answer 4

就像kristoffer所说，最好使用这种风格，然后转换服务器端。还有一个jQuery插件强制大写： 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>

Answer 5

bootstrap 3具有转换类，这些转换类使用文本大小写类转换组件中的文本。

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

如何在输入时将输入更改为大写

5 个答案: