attripの書くページに、青い線が残っていた。
最初はスペルチェックだけを止めれば消えると思った。spellcheck="false"を入れて確認したが、文字を確定したあとにも青線が出た。
効いたのはCSSではなく、入力欄に働く支援機能を分けて止めることだった。
spellcheckだけでは青線が消えなかった
画面に見えているのは一本の青線でも、原因は一つとは限らない。
スペルチェック、入力中の自動修正、ブラウザの文章候補、過去の入力を使う補完。それぞれ別の機能として入力欄に関わっている。
spellcheckは、要素にスペルチェックを許可するかを示す属性だ。MDNのspellcheck解説にもある通り、これだけで入力支援のすべてを止めるものではない。
一つの青線を、四つの設定に分けた
見た目の線をCSSで隠すのではなく、textareaの設定を見直した。
最終的に入れたのは、この四つだった。
<textarea
spellcheck="false"
autocorrect="off"
writingsuggestions="false"
autocomplete="off"
></textarea>writingsuggestionsは、ブラウザが文章候補を出すかを制御する属性だ。MDNのwritingsuggestions解説を確認し、falseを指定した。
textareaで使える属性はブラウザごとに差がある。今回は一つに決めつけず、入力支援を四つに分けて止めた。
直ったと判断した確認
修正後は、PC幅と375px、320pxで入力欄を確認した。ChromeとiPhone向けの表示でも、四つの属性が入っていることを確認した。
最後は実際に文字を書き、青線が残らないことを確認した。「治った」と判断できたのは、設定値ではなく、使った画面で症状が消えたからだ。
次からは、確定後に残るかを先に見る
入力中だけ出る線と、確定後にも残る線では、見る場所が変わる。
次に同じ症状が出たら、まず文字を確定する。入力欄からフォーカスを外す。それでも残るなら、CSSより先にブラウザやOSの入力支援を確認する。
小さな青線だったが、原因を一つに決めつけないための記録になった。
