ブラウザのフォーム入力を行う時、テキストボックスやチェックボックスにフォーカスがある状態でEnterを押すと、ブラウザが勝手にサブミットします。
便利っぽい機能ですが、テキストボックスが1つの場合は動作しないとか、押すボタンを決められないとか、若干の不都合を抱えていることは周知の通り。
特にSubmitボタンのname属性を元にしてサーバサイドの呼び出しロジックを決めているような場合は、結構致命的です。
で、その不都合を解消すると共に、Enterキーを押した時に押してほしいSubmitボタンを指定するためのスクリプトを探しましたがいいの見つからず、作成することにしました。
スクリプトはこんな感じです。
/** * Enterキーを押した場合に押したいボタンを設定する. * @param targetButtonId 押したいボタンのid * @mara formName フォームの名前 値を渡さない場合は、デフォルトのフォームを設定 */ function setOnEnterClickButton(targetButtonId,formName){ var form = (formName == null) ? document.forms[0] : document.forms[formName]; var targetButton = document.getElementById(targetButtonId); document.onkeypress=function(e){ e = e ? e : event; var keyCode= e.charCode ? e.charCode : ((e.which) ? e.which : e.keyCode); var elem = e.target ? e.target : e.srcElement; if(Number(keyCode) == 13) {//13=EnterKey if(!isIgnoreEnterKeySubmitElement(elem)){ targetButton.click(); } return isInputElement(elem) ? false : true; } } } function isIgnoreEnterKeySubmitElement(elem){ var tag = elem.tagName; if(tag.toLowerCase() == "textarea"){ return true; } switch(elem.type){ case "button": case "submit": case "reset": case "image": case "file": return true; } return false; } function isInputElement(elem){ switch(elem.type){ case "text": case "radio": case "checkbox": case "password": return true; } return false; }
テストページはここ
制御あり http://hatena.souko105.net/20081017/onEnterClickTest.html
制御なし http://hatena.souko105.net/20081017/onEnterClickNoScriptTest.html
フォーカスがない状態、またフォームにフォーカスがある状態でEnterキーを押すと、「次へ」のSubmitボタンが押されます。
結果ページで表示される
upfile=,message=,NEXTBUTTON=%8E%9F%82%D6
の「NEXTBUTTON」は、次へボタンのname属性の値です。
例外として、textareaには反応しません(改行できなくなるので)。またボタンの場合は、そのボタンを押します。
IE6と7、FireFox2と3で動作確認済みです。