Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:48.

フォームのリセットボタンに確認機能を加える

入力フォームに「リセット」ボタン(「クリア」ボタン)は不要です。
誤って押してしまうと、すべての入力内容が消えてしまう(初期値に戻ってしまう)ので、ユーザビリティ面で好ましくないボタンです。入力フォームは、リセットボタンを配置しなくても作成可能ですから、リセットボタンは配置しないで済むなら配置しない方が良いでしょう。

しかし。
どうしてもリセットボタンを表示する必要があることもあるかも知れません。クライアントにそう要求されたとか何とか。

リセットボタンを配置するなら、せめて誤操作による「全削除」をできるだけ防げるような機能を加えておきましょう。
具体的には、ユーザが「リセット」ボタンをクリックしたら、「本当にすべて削除してもよろしいですか?」という確認ダイアログを表示させます。こうしておけば、誤ってクリックした場合でも、いきなりすべてが削除されてしまようなことは避けられます。

「リセット」ボタンに確認機能を付加するのは、そんなに大変ではありません。というか、簡単です。
とりあえずサンプルを表示しておきます。

入力欄:

上記のフォーム中に適当に何かテキストを入力した後、「リセット」ボタンをクリックしてみて下さい。
JavaScriptが有効な環境であれば、「リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか?」という質問と共に「OK/キャンセル」のボタンが表示される「確認ダイアログ」が表示されます。

そこで「OK」をクリックすればリセット操作が実行され、「キャンセル」をクリックすればリセット操作は行われません。
これなら、ユーザが誤ってリセットボタンをクリックしてしまっても、その後の確認ダイアログでリセットを中止できます。

これを実現するソースは非常に簡単で、以下のように記述するだけです。(以下は、確認機能付きリセットボタンを作るHTML&JavaScriptソースです。)

<input type="reset" value="リセット(クリア)" onclick="return confirm('リセットボタンがクリックされました。本当に入力内容を削除してもよろしいですか?');" />

これだけです。
リセットボタン自体は、HTMLで、input要素のtype属性に値「reset」を指定することで作れます。ボタンの表面に表示する文字列は、value属性の値で指定できます。

そこに、onclick属性を加えて、確認ダイアログを表示するJavaScriptを記述しています。
confirmメソッドは、「OK/キャンセル」ボタンのある確認ダイアログを表示するメソッドです。この質問文は、自由に書き換えて構いません。

onclick="return confirm('質問文');"

confirmメソッドは、「OK」ボタンがクリックされると「true」を返し、「キャンセル」ボタンがクリックされると「false」を返します。なので、その返り値をそのまま返すことで、「キャンセル」ボタンがクリックされた際には、リセット操作も同時にキャンセルさせることができます。

※onclick属性の値の先頭に「return」と書くのを忘れないように注意して下さい。これがないと、確認ダイアログで選択された結果が何にも反映されず、問答無用でリセット機能が働いてしまいます。

……というわけで、このような、「確認機能付きリセットボタン」であれば、多少はユーザビリティ面でマシになるのではないかと思います。(最も良いのは、余計なリセットボタンは最初から表示しないことですが。)

なお、JavaScriptが無効な環境では、確認機能が実行されず、問答無用でリセットされてしまうので注意が必要です。(確認機能はJavaScriptですが、リセットボタンの機能そのものはHTMLの機能ですから。)

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど