小粋空間: コメント投稿時にフォームボタンをグレーアウトする for Movable Type

Top ＞ JavaScript ＞コメント投稿時にフォームボタンをグレーアウトする for Movable Type

2007年2月19日

コメント投稿時にフォームボタンをグレーアウトする for Movable Type

Posted at February 19,2007 3:17 AM
Category：[JavaScript]
Tag：[Comment, Customize, JavaScript, MovableType]

本サイトで適用している、コメントを投稿時にフォームボタンをグレーアウトするためのカスタマイズです。カスタマイズ方法については以前よりリクエストを頂いておりました。公開が遅くなって申し訳ありません。

コメント投稿時にフォームボタンをグレーアウトする

ここでは Movable Type でのカスタマイズ方法を紹介致します。他のブログツールについては順次公開していきたいと思います。
カスタマイズ元記事は下記です。ありがとうございました。

１．本カスタマイズの機能

コメントフォームの「投稿」ボタンクリック時にフォームボタンをグレーアウトにする
コメントフォームの「確認」ボタンクリック時はグレーアウトにしない

「確認」ボタンクリック時にグレーアウトしないのは、下記の理由のようにユーザビリティ上好ましくないと思ったためです。

「確認」でグレーアウトした場合、ブラウザの「戻る」でグレーアウトのままになる（投稿不能になる）
「確認」ボタンをクリックした時に「投稿」ボタンを押してしまったと錯覚する可能性がある

以下、カスタマイズ方法です。動作は Windows XP + IE6.0 / IE7.0 / Firefox2 / Opera9 で確認しています。テンプレートは Movable Type デフォルトテンプレートで確認していますが、当サイトの公開テンプレートでも動作します。
またカスタマイズにあたってはテンプレートにできるだけ手を加えないようにしています。

２．JavaScript 外部ファイルの作成

下記の内容を disabledButton.js という名前で保存し、メインページと同じディレクトリにアップロードしてください。

var disabledFlag = 0;
var isIE = (document.documentElement.getAttribute("style") ==
               document.documentElement.style);
function addFormAttribute(form) {
  isIE ? form.setAttribute("onsubmit", new Function("if (this.bakecookie.checked) rememberMe(this);disableSubmit(this);")) :
         form.setAttribute('onsubmit','if (this.bakecookie.checked) rememberMe(this);disableSubmit(this);');
  var elements = form.elements;
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].type == 'submit' && elements[i].getAttribute('name') == 'post') {
      isIE ? elements[i].setAttribute("onclick", new Function("setHiddenValue(this);")) :
             elements[i].setAttribute('onclick','setHiddenValue(this)');
    }
  }
}
function disableSubmit(form) {
  if(!disabledFlag){
    return;
  }
  var elements = form.elements;
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].type == 'submit' || elements[i].type == 'button') {
      elements[i].disabled = true;
    }
  }
}
function setHiddenValue(button) {
  if (button.name) {
    var q = document.createElement('input');
    q.type = 'hidden';
    q.name = button.name;
    q.value = button.value;
    button.form.appendChild(q);
    disabledFlag = 1;
  }
}

３．テンプレート修正

エントリー・アーカイブ／コメント・プレビューの </head> の直前に下記を追加します。

<script type="text/javascript" src="<$MTBlogURL$>disabledButton.js"></script>

また、同じテンプレートの body 要素に下記の青色部分を追加します。

<body class="layout-two-column-right individual-entry-archive" onload="individualArchivesOnLoad(commenter_name);addFormAttribute(document.comments_form);">

addFormAttribute の直前のセミコロン ";" もお忘れなく。

４．注意事項

コメント・プレビュー画面に本カスタマイズを適用する場合、コメント・プレビュー・テンプレートに必ず下記のタグ（青色部分）をフォームに追加してください。これを追加しないとグレーアウトしません。

　　：
<p>
   <label for="comment-url">URL:</label>
   <input id="comment-url" name="url" size="30" value="<$MTCommentPreviewURL$>" />
</p>
<p>
   <label for="comment-bake-cookie"><input type="checkbox"
      id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
      この情報を登録しますか?</label>
</p>
<p id="comments-open-text">
　　：

５．補足

グレーアウトする仕組み

「投稿」ボタンのクリックにより onclick イベントハンドラを起動します。ハンドラから起動された setHiddenValue でクリックされたボタンを hidden 型の input 要素として追加します。続いて onsubmitイベントハンドラが起動され、ハンドラから起動された disableSubmit でフォームボタンを disabled にします。

「確認」ボタンクリック時にグレーアウトしない仕組み

setHiddenValue の中で、変数 disabledFlag に 1 を設定し、disableSubmit の処理で、disabledFlag フラグが 1 の場合のみ button 要素を disabled にします（もっと良い実装があると思いますが）。

onsubmit 属性の再書き込み

form 要素の onsubmit 属性を用いて disableSubmit 関数を起動していますが、属性値には "if (this.bakecookie.checked) rememberMe(this)" が元から設定されているため、追加スクリプトで元関数と新たに加えた関数の両方を起動するように上書きしています。

IE の不具合対処

IE では、JavaScript の getAttribute / setAttribute で class ・style・イベント属性などを操作できないというバグがあり、その対処を施しています。IE 不具合対処の参考サイトは下記です。ありがとうございました。

Days on the Moon：IE の getAttribute / setAttribute

Posted by yujiro

« サブカテゴリーリストの折りたたみ（デフォルトテンプレート版） | Main | Windows XP のエクスプローラをダブルクリックで起動する »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

こんにちは。
こちらの記事も使わせていただきました。
ありがとうございます。
グレーアウトすると二度押しがなくていいですね。
とても重宝しています。

ただ、TypeKeyでログインしたときは
グレーアウトしないのですが、それは設置段階でどこか私がミスをしているのでしょうか（＾＾）？

[1] Posted by ヨンシマイ : April 8, 2007 1:14 PM

＞ヨンシマイさん
こんにちは。
ご返事遅くなり申し訳ありません。
カスタマイズ内容につきましては TypeKey に依存するものではありませんので、サイン・インの有無にかかわらず同じ振る舞いになると思います。
とは言いながら当方の動作確認が不十分かもしれません。

サイトの方はカスタマイズを外されているようでしたので設置されている状態で再度ご連絡頂ければ幸いです。
それではよろしくお願い致します。

[2] Posted by yujiro : April 11, 2007 4:48 PM

とても便利な機能ですね。

ちなみに当方では複数のユーザーに各カテゴリーのエントリー投稿をしてもらい、コンテンツを運営しているのですが、時として投稿者がついうっかりして投稿ボタンをダブルクリックすることがあるようで、先日ＤＢにて運営していたＭＴのデータベースが壊れてしまい再構築できなくなってしまう事態を経験しました。

投稿ボタンをダブルクリックして二重ポストしたことがデータベースの破損の一番の原因なのかは定かではありませんが、できれば「新規エントリー画面」とそのエントリーの「確認画面」からの投稿ボタンのグレーアウト方法について記事にしていただけないでしょうか？

コメント時の二重ポスト防止のこの手法を流用すればよいのかなっと安易に思ってみたりもしましたがなんとなく違うような気もしたり・・・。

お時間ありましたらこのコメントに対しての記事取り上げをお願いします。

[3] Posted by Ken : September 22, 2007 9:46 PM

＞Kenさん
こんにちは。
ご要望の件、承りました。実験して、うまく動作するようであればエントリーしたいと思います。なおMTのバージョンは3.xという認識です。
それではよろしくお願い致します。

[4] Posted by yujiro : September 25, 2007 3:44 PM

管理人様へ

＞ご要望の件、承りました。

感謝いたします。実験後、無事正常に動作した後、エントリーして頂けることを心待ちにしております。

ビジネスシーンでもCMSとして利用されている方（企業）も多いと思われますので、きっと、重宝されると思います。お手数をおかけ致しますが何卒、よろしくお願い致します。

＞MTのバージョンは3.xという認識です。

了解しました。ちなみに当方は「Ver.3.34」を使用しております。

[5] Posted by Ken : September 26, 2007 1:58 AM

＞Kenさん
こんばんは。
「エントリー投稿時のフォームボタンをグレーアウトするプラグイン for Movable Type 3.3x」をエントリーしましたのでお試し頂ければ幸いです。
それではよろしくお願い致します。

[6] Posted by yujiro : September 27, 2007 2:50 AM

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）

小粋空間 - a cheap joke and a play on words site