Enterキーによる誤送信防止

このページをソーシャルブックマークしてみんなに紹介する！ -->

Enterキーによる誤送信防止

フォーム送信で Submit ボタンを使用していると、[Enter]キーで送信されます。
これは便利な反面、改行の出来ないテキストフィールドなどで誤って[Enter]キーを押下すると、入力途中にもかかわらず、或いは送信するとは決めていなかったのに送信されてしまうという欠点もあります。
これは送信者に送信する意志を持って「送信」ボタンをクリックした時だけ送信されるスクリプトです。
また「ボタンを２回クリックしないで下さい」という注意書きをたまに見かけますが、このスクリプトは処理中にボタンが押下されるとメッセージ表示されるという、２度押し防止機能も付いています。

＜フォーム＞

<form name="Entry" action="xxxxx" method="post">
<input type="text" name="Text" size="50" maxlength="50">
<input type="button" name="Submit" value="送信" onClick="document.Entry.submit();">
</form>

フォーム側の処理で３行目のボタンを「type="submit"」ではなく「type="button"」にしすることによって、[Enter]キーでは処理されなくなります。
そして「onClick="document.Entry.submit();"」を設定することによって、ボタンをクリックした時に送信処理が始まります。
しかしこれでは時間のかかる処理をする場合、ユーザーが何度も送信ボタンをクリックする可能性がありますので、以下の Javascript で制御します。

＜フォーム＞

<form name="Entry" action="xxxxx" method="post">
<input type="text" name="Text" size="50" maxlength="50">
<input type="button" name="Submit" value="送信" onClick="Submit()">
</form>

フォーム側の処理で３行目のボタンのクリックイベントを「onClick="Submit();"」に変更し、以下のスクリプトを呼びます。

＜スクリプト＞

<script language="JavaScript" type="text/JavaScript">
<!--
/****************************************************************
* Enterキーによる誤送信防止
****************************************************************/
SubmitCheck=false;
function Submit(){
if(!SubmitCheck){
SubmitCheck=true;
document.Entry.submit();
}else{ bottonAlert(); }
}
function bottonAlert() {
Check = navigator.userAgent.indexOf(";");
if(Check != -1 && navigator.userAgent.substring(Check+2,Check+10)=="MSIE 3.0"){
alert("ボタンが２度押されましたので、再度実行してください。");
}else{ alert("処理中ですのでお待ちください。"); }
}
//-->
</script>

上記スクリプトを <head></head> の間に記述します。
６行目はページロード時に必ず通りますので、変数「SubmitCheck」は false がセットされています。
送信ボタンがクリックされると７～１２行の処理が呼び出されます。
初めて呼び出された時、変数「SubmitCheck」は false なので、９行目で変数「SubmitCheck」を true にし、１０行目で送信処理をします。
処理が終わってページがリロードされる前に送信ボタンがクリックされると、変数「SubmitCheck」は true なので、１１行目が呼び出され１３～１８行の処理になり、メッセージを表示します。
処理が終わってページがリロードされると６行目を通るので変数「SubmitCheck」に false がセットされ、送信ボタンがクリックされると送信処理が行われるようになります。

スポンサードリンク

< 戻る