読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

フォーム画面でページから離れるときにJavascript(JS)の警告を出す

Javascript Rails初級

f:id:nipe880324:20150607133236j:plain

上記のように、フォーム画面でページから離れるときにJavascript(JS)の警告を出す方法を説明します。

実際の動作は次のリンクから確認できます。
ページを離れる時に警告を出す - jsfiddle

動作確認

  • jQuery 2.1.0

JSの内容

beforeunloadイベントを使うことでこの動作を再現します。
beforeunloadは、ウインドウ(window)、ドキュメント(document)がアンロードされる前に発火するイベントです。
(あまりテストを行っていないのでバグがあるかもしれません。)

<script type="text/javascript">


$(window).ready(function(){
  
  // 値が変更されたとき(input要素、select要素が変更された場合)に
  // ブラウザの戻るや更新ボタン、タブを閉じるときに
  // 警告をだすようにする
  $('input, textarea, select').on('keyup change', function(){
    $(window).on('beforeunload', function() {
      return "このページを離れると、入力したデータが削除されます。本当に移動しますか。";
    });
  });

  // 戻るリンクや送信ボタンなどの通常の方法で画面遷移した場合は、
  // 通常通りアラートは表示されずに遷移する
  $('a, input[type=submit]').on('click', function(e) {
    $(window).off('beforeunload');
  });
});

</script>

HTML

<h1>フォーム画面</h1>

<ul>
  <li>入力値が変更された時にブラウザの戻るや更新ボタン、タブを閉じるなどしたときにJavascriptのアラートを出す。</li>
  <li>送信ボタンや戻るボタンの遷移時にはアラートを出さない。</li>
  <li>値を変更して、リロード(F5)、ブラウザの戻るボタンなどを押してみてください</li>
</ul>


>|html|
<form action="#" method="post">
  <div class="field">
    <input type="text">
  </div>

  <div class="field">
    <textarea></textarea>
  </div>

  <div class="field">
    <select>
      <option value="1">Value1</option>
      <option value="2">Value2</option>
      <option value="3">Value3</option>
    </select>
  </div>

  <div class="field">
    <input type="checkbox"> チェックボックス
  </div>

  <div class="actions">
    <input type="submit" name="commit" value="送信">
    <a href="#">戻る</a>
  </div>
</form>