フォーム編集中にEnterで送信されるのを防ぐ。

Javascript HTML WEB

フォームで編集中にEnterキーでサブミットされるのを防ぐ。

 参考サイト

http://d.hatena.ne.jp/xyk/20110118/1295331241

 

さらに、Enterキーで次のボックスにフォーカス移動するようにする。こんなCoffeeScriptにしてみた。

 

#IDで対象フォームを指定して、キープレスイベントを登録
$("#form").keypress (ev) ->
  #フォーカス可能な要素を配列で取得
  focusableElements=$(':focusable')
  #jquery plugin の select2 を使っていて、隠れている要素も配列に入ってきたので、ここで削除
  #非表示属性の要素を取得する方がスマートだろうが、今回はこれでいく。
  select2HiddenElementIndex=focusableElements.index($('#select2_bushu'))
  focusableElements.splice(select2HiddenElementIndex,1)

  #フォーカス可能配列の中で、今フォーカスがあたっている要素のインデックスを特定
  nowIndex=focusableElements.index(ev.target)
  #フォーカスの移動先要素を特定
  nextElement=focusableElements.eq(nowIndex+1)

  #フォームの送信ボタン、リセットボタンならば、Enterでボタンを実行する。ボタンはIDで指定した。
  if ev.target.id is 'search_run_btn'
    #ここで送信時の追加処理
    #イベントを無効化していないので、後続処理に続く。
　 else if ev.target.id is 'reset_btn'
    #ここでリセット時の追加処理
　  #イベントを無効化していないので、後続処理に続く。
  else
    #フォーカスを移動して、イベントを無効化
    if (ev.which and ev.which is 13) or (ev.keyCode and ev.keyCode is 13)
      nextElement.focus()
      ev.preventDefault()