リセット前に確認し「リセットしました」を2秒表示

フォームの入力内容をリセットするとき、「リセットしてよろしいですか?」という確認ダイアログを出現させ、確認ダイアログ内で、「OK」を選択した場合、リセットを実行し、リセットボタンの横に、「リセットしました。」と、約2秒間程だけ表示する。確認ダイアログ内で、「キャンセル」を選択した場合は、リセットを中止するサンプル。

実装例

名前

コメント

実装例の動作について

リセットボタンを押すと、「リセットしてよろしいですか?」という確認ダイアログが出現。

  • 確認ダイアログ内で、「OK」を選択した場合、リセットを実行し、リセットボタンの横に、「リセットしました。」と、約2秒間程だけ表示する。
  • 確認ダイアログ内で、「キャンセル」を選択した場合、リセットを中止する。

ソースコード

JavaScript

<script type="text/javascript">
<!--
function confirmReset(){
    var flag = confirm('リセットしてよろしいですか?');
    if ( flag ) {
        document . getElementById( 'reset-result' ) . style . display = "inline";
        setTimeout ( "nonDisplayTimer()", 2000 );
        return true;
    } else {
        return false;
    }
}
function nonDisplayTimer() {
    document . getElementById( 'reset-result' ) . style . display = "none";
}
// -->
</script>

HTML

<form method="post" onreset="return confirmReset()">
<p>名前</p>
<p><input type="text" name="InputText1"></p>
<p>コメント</p>
<p><textarea name="Textarea1" rows="5" cols="40"></textarea></p>
<p><input type="reset" value="リセット"> <span id="reset-result" style="display:none;">リセットしました。</span></p>
</form>

解説

JavaScript

<script type="text/javascript">
<!--
function confirmReset(){
    var flag = confirm('リセットしてよろしいですか?'); // 確認ダイアログを表示し、戻り値を変数 flag に代入
    if ( flag ) { // 確認ダイアログで「OK」を選択し、変数 flag に true が代入されている場合
        document . getElementById( 'reset-result' ) . style . display = "inline"; // 「リセットしました。」を表示
        setTimeout ( "nonDisplayTimer()", 2000 ); // 2000ミリ秒後に、nonDisplayTimer() を実行
        return true; // リセット実行
    } else { // 確認ダイアログで「キャンセル」を選択し、変数 flag に false が代入されている場合
        return false; // リセット中止
    }
}
function nonDisplayTimer() {
    document . getElementById( 'reset-result' ) . style . display = "none"; // 「リセットしました。」を非表示
}
// -->
</script>

HTML

onreset=""

<form method="post" onreset="return confirmReset()">

form要素のイベント属性である onreset="" で、リセット時に、JavaScript の confirmReset() を呼び出し、return で、戻り値を取得。戻り値が true の場合、リセットを実行する。戻り値が false の場合、リセットを中止する。

リセットしました。

<span id="reset-result" style="display:none;">リセットしました。</span>

リセットを実行した場合、この部分を、JavaScript で、コントロールし、約2秒間程だけ表示する。

スポンサード リンク

カテゴリー: JavaScript, フォーム, 逆引き パーマリンク