js+html 「ブラウザバックで戻ってきた」ときにformの値が消えているコトがある

原因

色々と理由があるらしい。下記以外にもいくつかあったような気がする

• formのactionをJSで上書きしてから「〇〇.submit()」している
• jsで「〇〇.submit()」している・・・これは関係あるのかは不明
• inputタグに「autocomplete="off"」を設定している

私の場合

▼この２つが面倒なことになっていた

• formのactionをJSで上書きしてから「〇〇.submit()」している
• inputタグに「autocomplete="off"」を設定している

formのactionをJSで上書きしてから「〇〇.submit()」している

この問題は・・・「JSで上書きしない」で対応

複数のボタンを設置し、それぞれの行先を変更したい

実際に確認はしていないので挙動は不明・・・ひとまずメモ。

▼ボタンに直接「action」を設定できるらしい

<input type="submit" formaction="〇〇.html" formmethod="get">

inputタグに「autocomplete="off"」を設定している

「autocomplete="off"」は基本、使っていない。
でも、大人の事情で一部「autocomplete="off"」を使っている。

「『autocomplete="off"』を使わない」ってのはNGなので条件をつける

1. 入力時に「autocomplete」の利用の切り替え
   • 値が無い→「autocomplete="off"」
   • 値がある→「autocomplete="off"」を無効
2. 送信時に「autocomplete」を削除

$(xxx).('focus',function(){ // 「autocomplete」が絡むinputの「イベント: focus」
  if ( $(this).val() == '' ) {
    $(this).attr('autocomplete','off'); // 空白なら「autocomplete="off"」
  }
  else {
    $(this).removeAttr('autocomplete'); // 「autocomplete」を削除
  }
});

$(xxx).on('click', function(){ // 「送信ボタン」をクリックしたとき
  $('[autocomplete="off"]').removeAttr('autocomplete'); // すべての「autocomplete」を削除
});