web-dev-qa-db-ja.com

JavaScript KeyCodeとCharCode

問題：

  • HTML入力で許可される文字をa-z A-Zのみに制限します。
  • ビジネス要件の場合、これはKeyPressで実行する必要があります。これにより、文字が入力に表示されることさえできなくなります。
  • Tab、Enter、矢印、Backspace、Shiftはすべて許可されます。ユーザーは、テキストボックスの内外への自由な移動、文字の削除などができる必要があります。

これが私のコードの出発点です...

var keyCode = (e.keyCode ? e.keyCode : e.which);

ただし、keyCodeで取得するすべての値は、Webで見た文字グラフのanyに対応していません。たとえば、文字「h」は104のリターンコードを提供します。

KeyCodeはCharCodeと異なりますか？どのコードに制御文字が含まれていますか？変換する必要がありますか？

入力をa-z A-Zに制限し、JavaScriptで必要なキーを許可するにはどうすればよいですか？

javascriptkeycode
41
Remotec

すべての質問に対する答えは 次のページ にあります。

...しかし要約すると：

  • （キーコード情報とは対照的に）文字情報を確実に取得できる唯一のイベントは、keypressイベントです。
  • keypressイベントでは、IE <= 8を除くすべてのブラウザーは、イベントのwhichプロパティに文字コードを保存します。 charCodeプロパティの文字コード。
  • keypressイベントでは、IE <= 8はkeyCodeプロパティに文字コードを保存します。

これは、キー押下に対応する文字コードを取得することを意味します。キー押下イベントオブジェクトがeと呼ばれる変数に格納されていると仮定すると、以下はどこでも動作します。

var charCode = (typeof e.which == "number") ? e.which : e.keyCode

通常、これは、存在する場合は文字コードを返し、そうでない場合は0を返します。すべきでないときにゼロ以外の値を取得する場合がいくつかあります。

  • In Opera <10.50のキー Insert、 Delete、 Home そして End
  • 非文字キー用のKonquerorの最近のバージョン。

最初の問題の回避策は少し複雑で、keydownイベントも使用する必要があります。

61
Tim Down

やれやれだぜ。 KeyboardEvent。[key、c​​har、keyCode、charCode、which]はすべて非推奨であるか、MozillaのAPIドキュメントによると現在未解決のバグがあります- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent 。 JQueryでさえ、これに負けて、ユーザーがそれを把握できるようにします https://api.jquery.com/keydown/ 。

10
nicopolyptic

実際、104はASCII小文字 'h'のコードです。keypressで入力された文字のASCIIコードを取得するには、e.which || e.keyCode、およびキー入力を心配する必要はありません。入力されたテキストに対して、keypressはすべてのブラウザで自動的に繰り返されます（優れた http://unixpapa.com/js/key.htmlによると ）。

だからあなたが本当に必要なのは：

<input id="textbox">

<script type="text/javascript">
document.getElementById('textbox').onkeypress = function(e){
  var c = e.which || e.keyCode;
  if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127))
    return false;
};
</script>

それを試してください： http://jsfiddle.net/wcDCJ/1/

（ASCIIコードは http://en.wikipedia.org/wiki/Ascii からのものです）

5
Han Seoul-Oh

onKeyPressには、大文字と小文字の異なるコードがあります。おそらく、キャップロックをオンにしてから文字を入力すると、期待するコードが得られることがわかるでしょう

onKeyUpとonKeyDownの大文字と小文字の文字コードは同じです。 onKeyPressに最も近いため、onKeyUpを使用することをお勧めします。

2
James Long

/ *非印刷キーのkeypressでkeyCodeを取得しません。代わりにkeydownでキーコードをキャプチャしませんか？ * /

function passkeycode(e){
    e= e || window.event;
    var xtrakeys={
        k8: 'Backspace', k9: 'Tab', k13: 'Enter', k16: 'Shift', k20: 'Caps Lock',
        k35: 'End', k36: 'Home', k37: 'Ar Left', k38: 'Ar Up', k39: 'Ar Right',
        k40: 'Ar Down', k45: 'Insert', k46: 'Delete'
    },
    kc= e.keyCode;
    if((kc> 64 && kc<91) || xtrakeys['k'+kc]) return true;
    else return false;
}

inputelement.onkeydown=passkeycode;

kc> 64 && kc <91 // a-zA-Z

xtrakeys ['k' + integer]）は、許可される特別なキーコードを定義します

0
kennebec

マークアップの例を次に示します。

<form id="formID">
    <input type="text" id="filteredInput">
    <input type="text" id="anotherInput">
</form>

次のロジックを使用して、キーボード入力をトラップできます（この場合、jQueryドキュメント対応ラッパーを介して）。

それは少し間抜けに見えるかもしれませんが、基本的に、私は許可したいすべてのものをチェックします（あなたの場合、大文字小文字を区別しないAからZの文字）と何もしない。つまり、デフォルトのアクションは許可されますが、アルファ以外の入力は禁止されます。

矢印キー、ホーム、エンド、タブ、バックスペース、削除などの標準キーボードナビゲーションがチェックされ、許可されます。

注：このコードは元々、英数字値（A-Z、a-z、0-9）のみを許可するユーザー入力を満たすために書かれたものであり、これらの行はコメントとしてそのまま残しました。

        <script>
            jQuery( document ).ready( function() {

                // keydown is used to filter input
                jQuery( "#formID input" ).keydown( function( e ) {
                    var _key = e.which
                        , _keyCode = e.keyCode
                        , _shifted = e.shiftKey
                        , _altKey = e.altKey
                        , _controlKey = e.ctrlKey
                    ;
                    //console.log( _key + ' ' + _keyCode + ' ' + _shifted + ' ' + _altKey + ' ' + _controlKey );

                    if( this.id === jQuery( '#filteredInput' ).prop( 'id' ) ) {
                        if(
                            // BACK,         TAB
                            ( _key === 8 || _key === 9 )    // normal keyboard nav
                        ){}

                        else if(
                            // END,           HOME,          LEFT,          UP,            RIGHT,         DOWN
                            ( _key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40 )  // normal keyboard nav
                        ){}

                        else if(
                            // DELETE
                            ( _key === 46 ) // normal keyboard nav
                        ){}

                        else if(
                            ( _key >= 65 && _key <= 90 )    // a- z

                            //( _key >= 48 && _key <=  57 && _shifted !== true ) ||   // 0 - 9 (unshifted)
                            //( _key >= 65 && _key <=  90 ) ||                        // a- z
                            //( _key >= 96 && _key <= 105 )                           // number pad 0- 9
                        ){}

                        else {
                            e.preventDefault();
                        }
                    }

                });
            });
        </script>
0
Mac