jQuery DataTablesとChrome（パスワード保存有効）において勝手にDataTables検索ボックス内に指定していない検索キーワードを初期値に入れてくる場合があって困っています

Question

jQuery DataTablesとChrome（パスワード保存有効）において勝手にDataTables検索ボックス内に指定していない検索キーワードを初期値に入れてくる場合があって困っています。条件を特定された方はいらっしゃいますか？

DataTablesを使用している社内WebアプリをChromeで動作させたところ、最近社内Webアプリの管理者編集画面にあるDataTables検索ボックスのみ、ページを開いた直後勝手に管理者ログインIDを入れて検索するようになったので使い勝手が悪くなりました。
以前検証したときにはこのような症状が発生しなかったので、困っています。
現在のところなぜ同ページのみ発生するのか調べても分かっていません。

しかしながら、とりあえず同ページについてはonLoad直後にDataTables検索ボックスの有無を調べて中へ勝手に入れられているようならJavaScriptで消去して1秒後中身を再確認するようにしたところ、3回勝手にログインIDを入れられた後初期値の空欄に戻りました。

function DeleteDisplayTableInput()
{
    if($('#display_table_filter label input').val() !== '') {
        $('#display_table').DataTable().search('').draw();
        setTimeout('DeleteDisplayTableInput()', 1000);
    }
}

一応解決ですけど、Chromeによって3回もDataTablesが書き換えられるのは見た目も無様です。
そこで同種の症状が発生して乗り越えた方にアドバイスを頂きたいと思い、相談する次第です。

なお、他のページや他のブラウザ（Edge/Firefox）・Chromeでパスワード保存無効にしているときにはそもそも問題の症状は発生しません。

各バージョンは以下の通りです。

• jQuery 1.11.1
• jQuery UI 1.9.2
• jQuery DataTables 1.10.5
• Windows版Chrome 72.0.3626.109（パスワード保存有効）

似たような質問を人力検索はてなにも投げています。

以上よろしくお願いいたします。

Comments

[m.ts10806]

これだけでは再現が難しいので実際のHTML、CSSなどもご提示いただければと思います。

[halohalolin]

mts10806さん、早速ご返答ありがとうございます。
しかしながら社内アプリなので、ソースコードから再現できる特定個所のみ抜き出す必要がありますが、今は難しいです。
何とか絞り込めましたら共有させていただきます。

[m.ts10806]

そうですね。難しいとは思いますが、なるべく流れが分かるものが望ましいです。

[yoorwm]

パスワード保存有効にしているからでは？

[halohalolin]

yoorwmさんありがとうございます。
多くの方がパスワード保存期間有効にしているので、パスワード保存期間有効のままでもこの症状が発生しないようにしたいと考えています。

なお、現在該当箇所についてDataTablesで表を表示前にCSSを操作して表を非表示にして、完全に検索ボックス内に文字が挿入されなくなったのを確認してから表を表示するように修正しました。
描画完了まで少し待つことになるのでスマートではないのですが、書き換えをしている無様さを見せることはなくなりました。
もしこの方法で担当からOKをもらいましたら、一旦そこで自己解決にするかもしれません。
ご了承ください。

引き続きよろしくお願いいたします。

[tino1231]

https://developer.mozilla.org/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
回答になるかはわかりませんが自動補完されないようにしてみてはいかがでしょうか。

[halohalolin]

taketomaさんありがとうございます。
autocomplete="off" は試してみましたが、効果ありませんでした。
jquery.disableAutoFill は興味深いです。

**

> なお、現在該当箇所についてDataTablesで表を表示前にCSSを操作して表を非表示にして、完全に検索ボックス内に文字が挿入されなくなったのを確認してから表を表示するように修正しました。

当初setTimeoutで文字が挿入されていたかどうかの判定をしていたのですが、いろいろテストした結果PCによってタイミングがバラバラ過ぎてどうもうまく動作しないケースがあることに気がつきました。
そこでjQueryの「.on("change", 判定関数())」を使って、キー入力・マウスからのクリックなしに検索ボックス内に文字が挿入されたら、検索ボックスを空にする処理で再度チェックしています。
もしこの方法で担当からOKをもらいましたら、一旦そこで自己解決にするかもしれません。
ご了承ください。

Answer 1

いろいろ試行錯誤しましたが、今回は以下の組み合わせを行ったところどのような場合でも勝手に検索ボックスへログインIDを入れてくることはなくなりました。

• jQueryの「.on("change", 判定関数())」を使って、キー入力・マウスからのクリックなしに検索ボックス内に文字が挿入されたら、検索ボックスを空にする処理

• 管理者を管理するページなので type="password" があるのですが、それら全てに autocomplete="new-password" を追加する

アドバイスを送っていただいた皆様ありがとうございました。