MacとChromeの環境下でinputテキストエリアの文字が自動補完される現象の解決方法

MacとChormeの環境下で、inputタグ、プレースホルダーの文字が初期表示時とマウスでクリック時に違うことがあります。

今回はその現象を解決する方法を解説します。

現状の問題点

この様なinputタグを作成した時に、初期状態での中身の表示とマウスでクリックしたときの文字サイズがおかしい現象になります。

本来なら文字サイズが切り替わらずにスムーズにそのまま入力できる様になるべきです。

ちなみに、FireFoxとSafariブラウザでは挙動は問題ありませんでした。

海外サイトには、Mac×Chromeで今回の記事と同様の問題が報告されており、どうやらMacとChrome特有の現象の様です。

開発環境

環境は以下になります。

環境

・OS Mac 10.15

・Chrome 85

実際のコード

修正前

実はこの現象は突き詰めるとChromeブラウザの自動補完が作動しているのが原因です。

下記は現状問題症状が発生しているコードです。

sample.html

sample.css

こちらにあるコードを付け加えます。

修正後

sample.css

  • 1-4行目は初期状態のリセットCSSを指す。しかしながらこの初期設定は今回の現象に影響ある範囲で、きちんと記入をしてあげないと問題を発生させる原因となる
  • 6-12行目は変更なし
  • 14行目は、-webkitはChromeブラウザに適用させるという意味
  • 同じく14行目のautofillは自動補完を指す
  • 同じく14行めの::first-lineは今回の動画でいうadminの自動補完された文字列を指す
  • 14行目で指定したadminの箇所を15-16行目で、親要素のhtmlと同様のfont-sizeとfont-familyを書くことで全く同様にhtml上に上書きされることになる。

最後に

いかがでしたでしょうか。こうした少しの機微も見逃さないエンジニアが優れたエンジニアになるわけです。

また今回の様な、チリ(小さな変遷)も積もってしまうと大変なバグを引き起こしかねません!

この様なチリを見つけた場合は一度動作を止めてしっかりと検証することが大切です。

スクールを利用して本格的に学ぶ

いかがでしたでしょうか?

10人中9人が挫折すると言われるプログラミングを、ヒロヤンも実はプログラミングスクールで学習をしてきたからで、結果、今はPythonエンジニアとして働いています。

挫折率が高いプログラミングこそお金を払ってメンターを付けて、道を見失わないように環境を構築する必要があるのではないでしょうか。

これはダイエットで自分一人では痩せられないけど、トレーナーを付けて否が応でもせざるを得ない環境を作ると一緒ですね。

ヒロヤンもプログラミング勉強開始直後はあれこれ悩みましたが、悩むよりも手っ取り早くスクールに登録した方が最短ルートで勉強できるのではないかと考え、結果挫折せずに今に至っています。

今なら無料でキャリアカウンセリングを行っているCodeCamp(コードキャンプ)のようなプログラミングスクールもありますのでこれを機会に是非カウンセリングだけでも受けてみてはいかがでしょうか?

CodeCampで無料のカウンセリング

上記リンク先から無料相談ができます。

またこちら(↓)ではPython専用のプログラミングスクールをまとめ紹介しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です