ホームページの素 ソフト販売/プログラム開発

Tips というより開発時に調べた Script 等を忘れないように書き留めた覚え書きです。
最近はここに書き留めておくことも忘れている始末で、我ながら情けなく思う今日この頃です。
ということで、不定期更新というか最近更新していませんが、JavaScript や VBScript などを紹介していきますのでご参考になれば幸いです。

Enterキーによる誤送信防止

フォーム送信で Submit ボタンを使用していると、[Enter]キーで送信されます。
これは便利な反面、改行の出来ないテキストフィールドなどで誤って[Enter]キーを押下すると、入力途中にもかかわらず、或いは送信するとは決めていなかったのに送信されてしまうという欠点もあります。

ログイン画面などパスワードを入力する場合は[Enter]キーで送信が便利だと思いますが、問い合わせや申込みフォームの場合日本語入力で変換した後[Enter]キーで確定しますので、間違えて２回[Enter]キーを押下してしまったり、半角英数入力で[Enter]キー押下の確定が必要ないのに[Enter]キーを押下してしまうと送信されてしまうという欠点があります。
確認ページを用意すれば戻って入力を続けられるかもしれませんが、ユーザーが面倒になって未登録でサイトを去ってしまうリスクがあります。

これは送信者に送信する意志を持って「送信」ボタンをクリックした時だけ送信されるスクリプトです。
[Tab]キーで移動してボタンがアクティブになった状態で[Enter]キーを押下で送信出来ますので、マウスを使わずに操作も出来ますので不便はないと思います。
また「ボタンを２回クリックしないで下さい」という注意書きをたまに見かけますが、このスクリプトは処理中にボタンが押下されるとメッセージ表示されるという、２度押し防止機能も付いています。

通常フォーム

通常フォーム送信する場合、input type="submit" で送信ボタンを作成しますが、[Enter]キーを押下するとフォームが送信されてしまいます。
キーボードで入力後にマウス操作をして送信ボタンをクリックするという手間が省けて良いのですが、入力中にうっかり[Enter]キーを押下すると入力途中で送信されてしまいます。

<form name="Entry" action="xxxxx" method="post">
  <input type="text" name="Text" size="50" maxlength="50">
  <input type="submit" value="送信">
</form>

サンプル

送信ボタンを書き換える

送信ボタンを「type="submit"」ではなく「type="button"」にしすることによって、[Enter]キーでは処理されなくなります。
そして「onClick="submit();"」を設定することによって、ボタンをクリックした時に送信処理が始まります。

しかしテキストフィールドなどが１つしかない時は[Enter]キー押下で送信されてしまいます。

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

サンプル

ダミーのテキストフィールドを置く

テキストフィールドなどが１つしかない時は上記の対処をしても[Enter]キー押下で送信されてしまいます。
その場合、ダミーのテキストフィールドを置くことによって対処できます。
そして「display:none;」を使って非表示にします。

しかし、時間のかかる処理をする場合、ユーザーが何度も送信ボタンをクリックして期待しない挙動をしてしまいます。

<form name="Entry" action="xxxxx" method="post">
  <input type="text" name="Text" size="50" maxlength="50">
  <input type="text" name="dummy" style="display:none;">
  <input type="button" value="送信" onClick="submit();">
</form>

サンプル

Javascript で制御する

onClick で Javascript を呼び出します。

<form name="Entry" action="xxxxx" method="post">
  <input type="text" name="Text" size="50" maxlength="50">
  <input type="text" name="dummy" style="display:none;">
  <input type="button" value="送信" onClick="fncSubmit();">
</form>

下記スクリプトを <head></head> の間に記述します。

<script language="JavaScript" type="text/JavaScript">
<!--
SubmitCheck=false;
function fncSubmit(){
    if(!SubmitCheck){
        SubmitCheck=true;
        document.Entry.submit();
    }else{ alert("処理中ですのでお待ちください。"); }
}
//-->
</script>

3行目はページロード時に必ず通りますので、変数「SubmitCheck」は false がセットされています。
送信ボタンがクリックされると4～9行の処理が呼び出されます。
初めて呼び出された時、変数「SubmitCheck」は false なので、6行目で変数「SubmitCheck」を true にし、7行目で送信処理をします。
処理が終わってページがリロードされる前に送信ボタンがクリックされると、変数「SubmitCheck」は true なので、8行目が呼び出されてメッセージを表示します。
処理が終わってページがリロードされると3行目を通るので変数「SubmitCheck」に false がセットされ、送信ボタンがクリックされると送信処理が行われるようになります。

※ jQuery を使用する場合、7行目は
document.Entry.submit(); → $('#Entry').submit();

サンプル

ページの先頭へ