Seasar DI Container with AOP

Kumu.Html.Disabledとは

Kumu.Html.Disabledはダブルサブミット（二重送信）を防止するために作られたjavascriptのライブラリです。

Kumu.Html.Disabledはkumu.jsおよびevent.jsに依存しています。

そのためkumu.js、event.jsを必ず先に読み込んでおく必要があります。

Kumu.Html.Disabledは以下の機能を提供します。

  1. formの二重送信防止
  2. アンカーの二重クリック防止

Kumu.Html.DisabledはHTMLが読み込み完了時にHTML内の全てのformとanchorを監視します。

二重送信防止の方法は２回目以降は一定時間イベントをキャンセルすることで実現しています。

そのため、画面を切り替え（遷移）しないと何もできなくなるということはありません。

復帰する時間はJSONのtimeプロパティで設定します。

またKumu.Html.Disabledは特定のJSONを設定として動作します。特別にjavascriptの関数を作成し、呼ぶ必要は一切ありません。

設定はDisabledConfというJSONに記述します。

DisabledConf = {
  time : 50000
}

DisabledConfの仕様は以下です。

  • time : 使えるようになるまでの時間を設定します(msec)
  • excludeForm : 監視対象外のformのidを配列で指定します。複数指定することができます。
  • submitMessage : formが送信中であった場合呼ばれる関数を設定します。
  • eccludeAnchor : 監視しない対象のanchorのidを配列で設定します。複数指定する事もできます。
  • anchorMessage : 既にクリック中である場合に呼ばれる関数を設定します。

formの二重送信防止

Kumu.Html.Disabledはformのonsubmitを監視しています。

Kumu.Html.Disabledは基本的にHTML内全てのformおよびanchorを監視します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/kumu.js"></script>
<script type="text/javascript" src="./js/event.js"></script>
<script type="text/javascript" src="./js/disabled.js"></script>
<title>Disabled Sample</title>
<script>
  DisabledConf = {
    time : 50000,
    excludeForm : ['test2'],
    submitMessage : function(){
      alert('送信中です');
    }
  }
</script>
</head>
<body>

<form id="test1" action="https://www.seasar.org/issues/">
  <input type="submit" value="サブミットテスト1">
  <input type="submit" value="javascriptサブミットテスト1" onclick="document.forms[0].submit();">
</form>
<form id="test2" action="https://www.seasar.org/issues/">
  <input type="submit" value="サブミットテスト2">
  <input type="submit" value="javascriptサブミットテスト2" onclick="document.forms[1].submit();">
</form>

</body>
</html>

eccludeFormは監視しない対象のformのidを配列で設定します。複数指定する事もできます。

submitMessageは既に送信中である場合に呼ばれる関数です。

上記では既に送信中であった場合alertを出します。

※現状ではformのonsubmitが発生しない状況だとうまく動作しません。

アンカーの二重クリック防止

form同様、Kumu.Html.Disabledは全てのanchorを監視します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="./js/kumu.js"></script>
<script type="text/javascript" src="./js/event.js"></script>
<script type="text/javascript" src="./js/disabled.js"></script>
<title>Disabled Sample</title>
<script>
  DisabledConf = {
    time : 50000,
    excludeAnchor : ['a2'],
    anchorMessage : function(){
      alert('遷移中です');
    }
  }
</script>
</head>
<body>
<a id="a1" href="https://www.seasar.org/issues/">テストリンク1</a>
<a id="a2" href="https://www.seasar.org/issues/">テストリンク2</a>

</body> </html>

eccludeAnchorは監視しない対象のanchorのidを配列で設定します。複数指定する事もできます。

anchorMessageは既にクリック中である場合に呼ばれる関数です。

上記では既にクリックしてある場合alertを出します。
Copyright© 2005-2006, The Seasar Foundation and the others. All rights reserved.