エンターキーで次の入力エリアにカーソルを移動する

プログラミング JavaScript
スポンサーリンク

INPUTタグでエンターキーを押されたらカーソル移動する

ブラウザー上にある入力エリア(INPUTタグ)でエンターキーを押下された時に
次の入力フィールドに移動するJavaScriptです。

JavaScriptのwindow.eventオブジェクトを利用して実現します。
以下がサンプルのHTML、Javascriptのソースです。

カーソル移動するソース

<html>
    <head>
        <title>エンターキー受付</title>
        <script type="text/javascript">
            function next_text( idx )
            {
                if( window.event.keyCode == 13 ){        // 13は0x0d(CRキー)
                    // 次のテキストボックスへ飛ばす処理をここにかく
                    document.mainForm.text1[ idx ].focus() ; 
                    return false ;
                }
                return true ;
            }
        </script>
    </head>
    <body>
        <form name="mainForm">
            <input type="text" size="30" name="text1" onKeyDown="return next_text(1);"><br>
            <input type="text" size="30" name="text1" onKeyDown="return next_text(2);"><br>
            <input type="text" size="30" name="text1" onKeyDown="return next_text(0);"><br>
        </form>
    </body>
</html>

これで3つの入力エリアをエンターキーで移動することができます。

Internet Explorerで動作確認しました。

タイトルとURLをコピーしました