にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

フォームのリセットボタンに確認機能を加える方法 [入力フォーム]

入力フォームに「リセット」ボタンは不要です。しかし、どうしても設置しなくてはならないなら、せめて誤操作を防げる仕組みを追加したリセットボタンにしましょう。そこで、確認機能付きリセットボタンをJavaScriptで作る方法をご紹介。クリックされた際に「本当にリセットして良いのか?」と確認ダイアログを表示する機能を加えます。これなら、誤ってクリックされても入力内容が削除されてしまうことを防げます。

入力フォームにリセットボタンは不要だが……

入力フォームに「リセット」ボタンは不要です。入力した内容を全部一気に消し去りたいと思うケースは滅多にないのに対して、誤って押してしまった場合のダメージが大きいからです。

フォームのリセットボタンを押すと、そのフォーム内に存在する全ての入力欄で、入力内容が消えて(または初期値に戻って)しまいます。そのため、リセットボタンの存在はユーザビリティ面で好ましくありません。入力フォームは、リセットボタンを配置しなくても作成可能なのですから、リセットボタンは配置しないで済むなら配置しない方が良いでしょう。

しかし、どうしてもリセットボタンを表示する必要があることもあるかも知れません。例えばクライアントにそう要求された場合とか。(^_^;)

リセットボタンをどうしても掲載する必要があるなら、せめて誤操作による全削除を防げるような仕組みを加える安全策を採っておきましょう。
具体的には、ユーザが「リセット」ボタンを押したら、「本当にすべて削除してもよろしいですか?」という確認ダイアログを表示させます。こうしておけば、誤って押してしまった場合でもいきなりすべてが削除されてしまようなことは避けられます。

「リセット」ボタンに確認ダイアログの表示機能を付加するのは、そんなに大変ではありません。むしろ簡単です。
その方法を以下でご紹介いたします。

リセットしても良いかどうかを確認するダイアログが出るリセットボタンの例

まずは動作サンプルを掲載しておきます。

入力欄:

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

その確認ダイアログで「OK」をクリックすればリセット操作が実行されて入力欄の内容は消えます。「キャンセル」をクリックすればリセット操作は行われず入力内容はそのまま維持されます。
これなら、ユーザが誤ってリセットボタンをクリックしてしまっても、その後の確認ダイアログでリセット処理を中止できて安心です。

※とはいえ、確認ダイアログが表示されても、勢い余って[Enter]キーを押してしまうなどで「OK」ボタンを押した取り扱いになってしまえば、入力内容は消えてしまうわけですが。(だからこそ、リセットボタンは表示しない方が望ましいわけです。)

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

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

HTMLソース

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

たったこれだけです。

リセットボタン自体は、HTMLでinput要素のtype属性に値resetを指定することで作れます。
ボタンの表面に表示する文字列は、value属性の値で指定できます。
そのinput要素にonclick属性を加えて、確認ダイアログを表示するJavaScriptを記述しています。

確認ダイアログを表示するconfirmメソッド

確認ダイアログを表示するconfirmメソッドについては、別途『「OK/キャンセル」ダイアログを表示して確認・分岐する方法』で解説していますのでそちらをご参照下さい。
しかし、簡単に紹介しておくと、以下のように記述します。

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

confirmメソッドは、[OK]ボタンと[キャンセル]ボタンのある確認ダイアログを表示するメソッドで、2つのボタンに併せて「引数に指定された文字列」も表示します。
また、[OK]ボタンがクリックされるとtrueを返し、[キャンセル]ボタンがクリックされるとfalseを返します。
なので、confirmメソッドから返ってくる値をそのまま(onclick属性内のJavaScriptで)返すことで、[キャンセル]ボタンがクリックされた際には、リセット操作も同時にキャンセルさせることができます。

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

というわけで、このような、「確認機能付きリセットボタン」であれば、多少はユーザビリティ面でマシになるのではないかと思います。(最も良いのは、余計なリセットボタンは最初から表示しないことですが。)
なお、JavaScriptが無効な環境では、確認機能が実行されず、問答無用でリセットされてしまうので注意が必要です。(確認機能はJavaScriptですが、リセットボタンの機能そのものはHTMLの機能ですから。)

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---