Help us understand the problem. What is going on with this article?

Chromeのautocompleteはユーザーのアクションがあってからはじめて値が入力される

タイトルを換言すると、
ページ表示直後、autocompleteされた値はJavaScriptで取得できない。

何の話をしているのか

たとえば、よくあるログインページ。
スクリーンショット 2020-03-27 0.57.17.png
メールアドレスとパスワードでログインするフォームだが、
以前ログインしたことがあれば、ブラウザが自動でメールアドレスとパスワードを入力してくれる。これがautocompleteだ。
上の画像は、Google Chromeでログインページを開いた直後に、autocompleteしてくれたときのスクリーンショットだ。

この状態で、input要素にはすでに値が入力されているようにみえるが、実はまだ入力されていない
何を言っているのかわからねーと思うが、おれも何が起きているのかわからなかった…

<label>メールアドレス<input type="email" name="email"></label>
<label>パスワード<input type="password" name="password"></label>
console.log(document.forms[0].email.value);
// -> 空

ちなみに、ページのどこか(フォーム要素じゃなくてもどこでもいい)をクリックすれば、
(この瞬間に、フォントサイズが変わるなど目に見える変化が起こる)
きちんと値が入力されるらしく、JavaScriptでも取得できるようになる。

何が困るのか

上記の例で言えば、ログインボタンの活性化制御をしている場合だ。
メールアドレスとパスワードの入力値をチェックして問題ない場合のみ、ログインボタンのdisabled属性を除去する機能を実装するなど。
autocompleteされているので、値は入力済み。しかし、JavaScriptでは値が取得できないので未入力、ログインボタンは非活性。

何が起こっているのか

日本語では見つけられなかったが、英語で議論されている記事を見つけた。
https://stackoverflow.com/questions/35049555/chrome-autofill-autocomplete-no-value-for-password
どうも、ページ表示直後は、autocompleteされた値は入力されておらず、ただのサジェスト(入力候補)を表示しているだけのようなのだ。そのときのDOMの状態を開発ツールでみると以下のようになっていた。-internal-input-suggested という文字列が見える。
スクリーンショット 2020-03-27 1.20.04.png
ユーザーの目には入力されているっぽく見えるけれど、実際には値はまだ入力されてないのだから、JavaScriptで値を取得しようとしても空なのも納得がいく。
そして、ページ内のどこかをクリックするなど、ブラウザに対しユーザが何らかのアクションを起こすと、そこではじめて値がinputに入力されることになる。そのDOM状態が以下。
スクリーンショット 2020-03-27 1.27.53.png
こうなれば、JavaScriptで値を取得できるようになる。

なぜこのような動作なのか

一見バグのようにも思えるが、ユーザーのアクションがあってはじめてinputに値を入力するというのは、セキュリティ上の理由があるのかもしれない。よう知らんけど。

どうやって克服するのか

状況は分かったが、どうやってこの問題を乗り越えるのか。
値が入力されているように見えるけど、実は入力されてない。でも、ユーザーのアクションひとつでオートフィルされる状態なのだから、この状態でログインボタンを活性化しておきたい。だが、入力されていることを確認できない。

引用した記事では、回答者はautocompleteされたinput要素の背景色をチェックして、値がオートフィルされているか(されつつあるか)を判断すればいいと言っている。
たしかに、それで値が入力されつつあることを判断できなくはないが、私は好ましくない実装だと思う。autocomplete時に背景色を変えているのは今のブラウザの仕様に過ぎず、今後変わるかもしれないものに依存した判定は回避すべきだろう。

じゃあ、どうすべきなのか。
私の結論としては、何もしない、というのでいいと思う。
ユーザーが何かアクションを起こせば、そのときに値が入力され、意図した状態に納まるのだ。それでいいではないか。

HieroglypH
フリーランスのウェブエンジニア。フロントエンド中心です。 ブラウザのバグや、JavaScript関連のつまずきポイントなど、小ネタが多い。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした