Google 検索結果上位で解決できない問題の解決方法

Google Chrome で autocomplete=off が効かない問題を JavaScript で解決する方法

Google Chrome で autocomplete=off が効かない問題を JavaScript で解決する方法

Google Chrome で入力フォームにデータ入力しようとすると 意図せず自動入力補完が表示されてしまう場合がある。これを無効にしたいが autocomplete=off が効かない…この問題を JavaScript を使って無効にする方法をご紹介いたします。

※ネット検索上位で表示される方法がうまくいかなかったので…検証しました。

Google Chrome の問題

僕がこの問題にぶち当たった入力欄は、住所情報とは全く関係ない下記のような input でした。

<input type="text" id="ContractToDate" name="ContractToDate" autocomplete="off">

検索結果上位で見かける input type=”password” でもなければ、住所関連の項目でもありません。。ただし、同一入力フォーム内に “ZipCode” や “Address” といった項目はありましたので、Chrome が判断して自動補完が表示されているようでしたが…

autocomplete=”off” が効かない

autocomplete=”off” 属性による無効化はもちろん真っ先に試しましたが…効きませんでした、、検索結果上位にそういった記事が並んでいるので、多くの人が困っているようです。Google Chrome ともあろうブラウザが…これは仕様でしょうか?!バグでしょうか?!

Google Chrome 設定 – [住所の保存と入力] OFF で無効にできる

Google Chrome の設定でユーザー側が無効にする場合には、[設定][自動入力][住所やその他の情報] をクリックして開き [住所の保存と入力] を OFF にすることで(とりあえず)解決はしますが…ユーザーに設定させることなくサーバー側で無効にしたいのです!

JavaScript のイベント処理で解決する

そこで Google Chrome が自動入力補完をどのタイミング(イベント)で表示しているか?!を確認して、そのイベント前後でプログラム的にブロックできないか?!を考えます。。

mousedown 時に表示されている

この自動補完がどのイベントのタイミングで表示されているのか?をゆっくりとマウスをクリックしながら確認すると…(“Click” イベント発生時ではなく)“mousedown” イベント発生時に表示されていることが確認できました。さらに、$(‘#ContractToDate’) 入力の1つ前の $(‘#ContractFromDate’) 入力項目へフォーカスしたあとで [TAB] キーで $(‘#ContractToDate’) へフォーカスを当てると…自動補完は表示されません。つまり…

mousedown イベントを無効にしたあとで JavaScript でフォーカスすれば良いのでは!?

と考えました。そこで、まずは こんな風に “mousedown” イベントを無効にしてみると…

$('#ContractToDate').on('mousedown', function(){
  return false;
});

自動補完は表示されなくなりましたが、、フォーカスすら当たってくれなくなってしまいます、、そこで return false; の前に $(#ContractToDate’).focus(); を挿入してみます。すると今度は…

$('#ContractToDate').on('mousedown', function(){
  $('#ContractToDate').focus();
  return false;
});

return false; が動作せず、自動補完も表示されるようになってしまいました、、そこで順番を入れ替えて return false; → $(‘#ContractToDate’).focus(); の順で処理させてみると…

$('#ContractToDate').on('mousedown', function(){
  return false;
  $('#ContractToDate').focus();
});

今度は再びフォーカス処理が効かなくなってしまいました、、

setTimeout を使ってフォーカスする

$(‘#ContractToDate’) の “mousedown” イベント発生時に setTimeout を使って1秒後にフォーカス処理するようにしておいて、return false; するようにします。

$('#ContractToDate').on("mousedown", function(){
  setTimeout(function(){
    $('#ContractToDate').focus();
  }, 1000);
  return false;
});

なんと、うまくいきました!ですが、1秒も待ってられないので 1ms にしてみます。

$('#ContractToDate').on('mousedown', function(){
  setTimeout(function(){
    $('#ContractToDate').focus();
  }, 1);
  return false;
});

これで解決できました。皆さんも試してみてくださいね!

プログラミング相談受付中

自営エンジニア歴 20年以上の 当ブログ作者が、プログラミングに関するオンライン相談(zoom 等)を受付中です。言語は HTML CSS JavaScript jQuery PHP MySQL VBScript など…

詳細・お問い合わせはこちら