7964


以下の様なソートのためのModalダイアログをTwitter Bootstrapを用いて作成しています。

[code]

    <div class="modal fade" id="sort_form_modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" data-keyboard="true">
        <div class="modal-content">
          <form accept-charset="UTF-8" action="/" method="get">
            <div style="display:none"><input name="utf8" type="hidden" value="✓"></div>
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
              <h4 class="modal-title">ソート</h4>
            </div>
            <div class="modal-body">
              <span>ソート条件</span> 
              <div class="btn-group" role="group" data-toggle="buttons">
                <label class="btn btn-primary active">
                  <input type="radio" name="direction" value="asc" checked>昇順
                </label>
                <label class="btn btn-primary ">
                  <input type="radio" name="direction" value="desc">降順
                </label>
                <div>
                  <select class="form-control" name="sort">
                    <option value="foo">foo</option>
                    <option value="bar">bar</option>  
                  </select>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <input class="btn btn-primary" name="commit" type="submit" value="ソートする">
            </div>
          </form>
        </div>
      </div>
    </div>
    
[/code]

そしてエンターキーでSubmitとESCキーでModalを消すために以下の`jQuery`を使っています。

[code]

    $('#sort_form_modal').modal({
        keyboard: true;
    });
    
    $('#sort_form_modal').on( 'keypress', function( e ) {
        if( e.keyCode === 13 ) {
            e.preventDefault();
            $( this ).trigger( 'submit' );
        }
    });
    
[/code]

これだとセレクトボックスの値を変えた後にエンターキーでSubmitが押されるのですが、Modalが開いた直後やもしくは昇順・降順を選択しただけではエンターキーを押しても何の反応もありません。

どうすればModalを開いた直後からエンターキーの入力を受け取ってSubmitを送るようにできるのでしょうか？


CC BY-SA 3.0
2015-03-16T04:00:48.237
7960
2015-03-16T05:35:51.007
2015-03-16T05:35:51.007
8752
3271
question
javascript html jquery twitter-bootstrap
Twitter BootstrapのModalダイアログ内のフォームをエンターキーでSubmitする方法


Enterキー入力でSubmitするためには、form要素内のいづれかのinput要素にフォーカスがあたっている必要があります。Modalが表示されたタイミングではどこにもフォーカスが当たっていないので、「Enterキーを押しても何の反応もない」状態になってしまいます。

解決策として、Modalが表示されたタイミングで、JavaScriptから自動的にinput要素にフォーカスをあてる、というのが考えられます。

Modalが表示されたタイミングで`shown.bs.modal`というイベントが発行されるので、そのイベントハンドラ内にinput要素にフォーカスを当てる処理を記述しています。

[code]

    $('#sort_form_modal').on('shown.bs.modal', function () {
        $('input[type="radio"]').first().focus();
    }).modal({
        keyboard: true
    });
    
[/code]

これで、Modalが表示された直後にradioボタンにフォーカスがあたっている状態になり、Selectボックスの値を変える前でも、Enterキー入力でSubmitが行えるはずです。

なお、質問内の以下のコードは不要になります。

[code]

    $('#sort_form_modal').on( 'keypress', function( e ) {
        if( e.keyCode === 13 ) {
            e.preventDefault();
            $( this ).trigger( 'submit' );
        }
    });
    
[/code]


CC BY-SA 3.0
2015-03-16T04:57:32.707
7964
2015-03-16T04:57:32.707
8752
7960
answer