SafariとChromeのフォームフィールドでのテキストの選択に関する問題

読者の皆さん、おそらく次の問題に遭遇したことがあります。SafariおよびChromeブラウザーのフォームフィールドでテキストを選択するときにマウスがフィールドから出てしまうと、選択が不可解に消えてしまいます。 このバグの説明がわかりにくいと感じる人は例を見ることができます。

長い実験を通して、どのような状況でフォームフィールドがこのような奇妙な振る舞いをするのかが明らかになりましたが、別の質問「なぜ」は未回答のままでした。

それで、ここに、啓示があります：この奇妙は、親がbodyタグを含むこの形式のフィールドを持っている場合に発生します。 text-align：center！

したがって、この問題の解決策は、text-align：leftが設定された別のコンテナで入力をラップすることです。

ただし、これだけではありません。

フィールドの親の中に、表示を持つ要素が少なくとも1つある場合：inline-block、このソリューションはすぐに、そして不可思議なことに、動作を停止します。

いくつかの簡単な例

選択が消えます

Copy Source | Copy HTML < div style ="text-align: center"> < input type ="text" /> </ div >

1. Copy Source | Copy HTML < div style ="text-align: center"> < input type ="text" /> </ div >
2. Copy Source | Copy HTML < div style ="text-align: center"> < input type ="text" /> </ div >
3. Copy Source | Copy HTML < div style ="text-align: center"> < input type ="text" /> </ div >

この場合、選択は消えません

Copy Source | Copy HTML

1. < div style = "text-align：center">
2. < div style = "text-align：left">
3. < 入力 タイプ =「テキスト」/>
4. </ div >
5. </ div >

この場合、選択は消えます

Copy Source | Copy HTML

1. < div style = "text-align：center">
2. < div style = "display：inline-block">
3. < div style = "text-align：left">
4. < 入力 タイプ =「テキスト」/>
5. </ div >
6. </ div >
7. </ div >

ご清聴ありがとうございました。 誰かがこの情報が役立つことを願っています。