SHINY DEVIL

[JavaScript] Enterキーで直接Submitする方法と無効化する方法

フォームに入力中、特に日本語を入力した後に文字を確定しようとしたら、英数字入力モードになっていることに気付かずに、そのままSubmit(送信)されてしまった、なんて苦い思いをしたことがある人って結構多いと思う。

注意して入力する、ブラインドタッチが画面を常に見ている、という人でも、なぜかEnterキーを2度押ししてしまった、なんてこともあるかもしれない。

そんなとき、EnterキーでのSubmitを無効化していたら、間違ってEnterキーを押してしまってもSubmitされてしまわずに済むので、ユーザビリティとしてはとても親切なんじゃないかな。

Enterキー無効化

そんなわけで、JavaScriptでEnterキーを無効化してしまいましょう。Submitするのはボタンクリックに任せればいいんです。

document.onkeypress = enter;
function enter(){
  if( window.event.keyCode == 13 ){
    return false;
  }
}

これで、日本語入力中にEnterキーを連打してしまっても、日本語入力しているつもりで英数字入力モードになっていて確定するつもりでEnterキーを押してしまっても、フォームが送信されてしまうことはありません!

Enterキーで直接Submitする

状況によっては、逆にEnterキーでSubmitしたい!という状況もあるかもしれない。または、Enterキーが押された場所を取得したい、という特殊な場合など。あ、あくまでこれは自分用のメモですよ(笑)

まずは、Enterキーが押されたらSubmitするスクリプト。

<script>
  function enter(){
    if( window.event.keyCode == 13 ){
      document.form1.submit();
    }
  }
</script>

そしてinputタグからこの関数を呼べば、Enterを押した瞬間Submit!!

<form name="form1">
  <input type="text" onkeypress="enter();">
</form>

これで、Submit用にボタンを用意しなくても、Enterキーで送信できる。ボタンを配置しないで、Enterキーで何かアクションを起こしたいときに使えると思う。

Enterキーが押されたボックスを取得する

次に、何番目のテキストボックスでEnterキーが入力されたかを判断したい場合。

用途としては、Enterキーを入力してアクションを起こした後に、入力していたテキストボックスの番号を取得して次の処理につなげる場合など。

以下のような感じに作れば、取得できる。

<script>
  function enter( element ){
    if( window.event.keyCode == 13 ){
      var maxTextNum = 0;
      var myTextNum = 0;

      for( var i = 0; i < document.forms[0].length; i++ ){
        if( document.forms[0].elements[i].type == "text" ){
          maxTextNum++;
          if( document.forms[0].elements[i] == element ){
            myTextNum = maxTextNum;
          }
        }
      }
      alert( "全 " + maxTextNum + " 個中 "
           + myTextNum + " 個目に入力しました!" );
    }
  }
</script>

<form>
  <input type="text" size="10" onkeypress="enter( this );">
  <input type="text" size="10" onkeypress="enter( this );">
  <input type="text" size="10" onkeypress="enter( this );">
  <input type="text" size="10" onkeypress="enter( this );">
  <input type="text" size="10" onkeypress="enter( this );">
  <input type="text" size="10" onkeypress="enter( this );">
  <input type="text" size="10" onkeypress="enter( this );">
  <input type="text" size="10" onkeypress="enter( this );">
  <input type="text" size="10" onkeypress="enter( this );">
  <input type="text" size="10" onkeypress="enter( this );">
</form>

最後に

実際に自分が作ったのはStruts環境上なので、紹介した組み方とはちょっと違いましたが、普通のWebページで使う場合は上記でいけると思います。

テキストボックスの順番を取得する方法は、あまり使い道がなさそうですが(笑)


ヘッダ内に以下を記述。もしくは外部ファイルで用意し、ヘッダ内で読み込む。 <SCRIPT LANGUAGE="JavaScript&quo...
評価用に作ってみた、リロードを一時停止する処理。METAタグを使ったリロードよりも画面がチカチカするので、これ自体は不採用になったけど、状況によっては使えるかも...
スポンサーリンク

この記事をシェア

アカウントをフォロー