コメント編集の削除ボタンに確認用ダイアログを付ける

たまにやってしまいます。コメント編集時に間違って『削除』ボタンを押してしまい「あああぁぁ～！((+o+))」という事。

それまでに書いたものが容赦無く一瞬で消えてしまう空虚感…。何度味わっても切な過ぎます。

（自分が投稿した『コメント』の話です。削除って確認画面出ないので。）

テンプレート制作時に「いっそのこと削除ボタンなんて無くすか？」と考えた事も有りましたが、投稿者からすると「コメントを削除したい」と思う時はやっぱり有るんですよね。(^^;

なので、コメント編集時のボタン誤操作全削除を防ぐ『削除ボタンに確認ダイアログ』を表示する方法を考えました。

（削除ボタンの有無はテンプレートに依ります。また、投稿時にパスワードを設定しないと編集・削除は出来ません。）

削除ボタンに確認用ダイアログを付ける JavaScript

① HTMLのみ: 削除ボタンをクリックすると、onclick 内のコードが実行され確認ダイアログを表示する。

<input type="submit" name="edit[delete]" value="<%template_delete>" onclick="return confirm('入力内容を削除しても良いですか？');">

② HTML+JS: 削除ボタンの HTML と JavaScript を分けて記述し確認ダイアログを表示する。

<input id="del_btn" type="submit" name="edit[delete]" value="<%template_delete>">

<!--edit_area-->
<script>del_btn.onclick=function(){return confirm("入力内容を削除しても良いですか？")};</script>
<!--/edit_area-->

①も②も同じように動作します。

どちらを使うかは、ご利用テンプレートの取り付け該当箇所を見て下記のように判断して下さい。

FC2ブログテンプレートでの取付位置

テンプレートの編集画面を開き、キーボードの［Ctrlキー＋Fキー］を押して検索窓を出し、その中に edit[delete] と入れると（テンプレートに削除ボタンが有る場合のみ）1ヶ所見付かります。

name="edit[delete]"（ name=edit[delete] になっている場合有り）を含むボタン部のソース内に id="〇" という id属性が有ったら（idは複数付けられないため）①を使い、無かったら ①② どちらでも使えます。

①の場合 → 上記のようにオレンジ部分のJSを追加します。

②の場合 → ボタン部のソースにオレンジ部分のように id="del_btn" を追加し、JS部分を（FC2ブログの方はエリア変数を含めて）</body> の上に追加します。

後は『更新』ボタンを押して適用して下さい。

取り付け後、確認のため一度ダミーでコメント投稿して、編集画面で『削除』を押してみて下さい。取り付けミスで、押した際に「あああぁぁ～」な結果になると困るので。^^;

確認用ダイアログの JavaScript について

[OK] [キャンセル] の確認ダイアログを出すには confirm関数を使います。

[OK] ボタンがクリックされると true ,「キャンセル」ボタンがクリックされると false を返すので、[キャンセル] ボタンのクリックで削除操作もキャンセルさせる事ができます。

＊ onclickにreturnを記述しないと、[キャンセル] を押しても削除機能が働くので要注意。^^;