9


4

入力中に入力を大文字に変更する方法

入力テキストの値を大文字に変更するために、 `onkeyup =" this.value = this.value.toUpperCase(); "`を使用しています。 これは機能していますが、私の必要は、マウスイベントを使用せずに入力ボックスの単一の文字を変更することです。 左矢印キーを使用してカーソルを後方に移動すると、キーアップイベントがトリガーされ、カーソルが最後まで移動します。 このスクリプトを変更して、矢印キーを使用して後方に移動し、その間のどこかでテキストを変更するにはどうすればよいですか

現在のコードは次のようになります…​


5 Answer


28


CSSはどうですか:

input.upper { text-transform: uppercase; }

注:これにより、ユーザーが入力した大文字ではなく値がサーバーに送信されます。


3


サンプルは次のとおりです。



0


onkeyupで押されたキーを確認し、キーa〜zのみを処理できます。 キーコードは数値であり、キーコードがa(65)とz(90)のキーコードの間にあるかどうかを確認するだけなので、かなり簡単です。


0


kristofferが言うように、おそらくこのスタイルを使用し、サーバーサイドを変換するのが最善です。 大文字を強制するjQueryプラグインもあります:http://plugins.jquery.com/plugin-tags/uppercase

            input.upc { text-transform: uppercase; }


            // 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);
                }




            Fld 1 : browser shows upper-case, form submits mixed-case



            Fld 2 : javascript updates text to uppercase, form submits uppercase


-1


ブートストラップ3には、テキスト大文字化クラスを使用してコンポーネント内のテキストを変換する変換クラスがあります。

Lowercased text.
Uppercased text.
Capitalized text.