お問い合わせやユーザー登録などのフォームに入力をするときに、良くあること。
日本語を入力した後、そのままEnterキーで文字を確定しようとしたつもりが、実は英数字入力モードになっていて、入力途中なのにそのままSubmit（送信）されてしまった、なんて苦い思いをしたことがある人、結構いませんか？
「普段からフォームに入力するときは注意しているから大丈夫」という方、「ブラインドタッチで入力するので常に画面を見ているから大丈夫」という方、いらっしゃると思います。でも、なぜかフォーム入力中にEnterキーを2度押ししてしまった！なんてこともあるかもしれない。
そんな状況で、もしサイト側でEnterキーでのSubmitを無効化していたら、ユーザーが間違ってEnterキーを押してしまってもSubmitされてしまわずに済むので、ユーザビリティとしては、とても親切なんじゃないかな。
その他、Enterキーが押されたときの処理まわりをまとめて、自分用メモとして残しておきます（笑）
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ページで使う場合は上記でいけると思います。
テキストボックスの順番を取得する方法については、ほぼ使い道がなさそうですが（笑）
コメント