【JS】キーイベント・ハンドル ～ キーを制御する ～

JavaScript

■ はじめに

 * JavaScriptで、キーイベントを制御する例を記載する

■ 例1：Enterキーで、別のテキストボックスに移動

 * Windowイベントのキーコード(window.event.keyCode)から、該当するキーコードかどうかを判定
 * 該当するキーコードだったら、フォーカスメソッド(document.all.item(【id】).focus())でフォーカス移動

サンプル

<html>
<head>
<script language="javascript">
function mobeNextFocus(code, idName){
       if (code == Event.KEY_RETURN) {
              document.all.item(idName).focus();
       }
}
</script>
</head>
<body>
<form name="form1">
<input type="text" name="TextBox1"  onkeypress="mobeNextFocus(window.event.keyCode,'TextBox2')" /><br>
<input type="text" name="TextBox2"  onkeypress="mobeNextFocus(window.event.keyCode,'TextBox3')" /><br>
<input type="text" name="TextBox3"  /><br>
<input type="submit" />
</form>
</body>
</html>

補足

* Event.KEY_RETURN : リターンキーのコード (13)

参考資料

http://social.msdn.microsoft.com/forums/ja-JP/vwdexpressja/thread/0d5ff2cd-b85e-4b65-8ccc-49de57db8dfc/

■ 例2：キーを無効にする

サンプル

* IE限定 
<script type="text/javascript">  
<!--        //
    window.document.onkeydown = onKeyEvent;

    function onKeyEvent() {
        // 発生したイベントのキーコードを取得
        var code = event.keyCode;

        // 該当するキーコードで分岐。
        var returnValue = true;
        switch (code) {
            case 13: //Enter キー
                returnValue = false; // 無効
                break;
            default:
                returnValue = true;
                break;
        }
        return returnValue;
    }
-->
</script>

補足

 * 以下の関連記事で実際に活用
https://blogs.yahoo.co.jp/dk521123/36099100.html

参考文献

http://www.syboos.jp/webjs/doc/disable-key-event.html
http://d.hatena.ne.jp/elwoodblues/20110829/1314606533

関連記事

二重登録・二度押しの制御を考える

http://blogs.yahoo.co.jp/dk521123/27241886.html

Enterキー長押しの制御を考える

http://blogs.yahoo.co.jp/dk521123/28165086.html

Bootstrap 4 ～ モーダルダイアログ編 ～

https://blogs.yahoo.co.jp/dk521123/36099100.html