teratailにも同様の質問 をしましたが回答が得られなかったためこちらに質問させていただきます。
どなたかわかる方、教えていただけると嬉しいです。
現象の説明
safariのみで起こる現象です。
contenteditable
要素の中で以下の条件が揃うと自動でタグが外されてしまいます。
- ユーザが改行するなどして新しく生成された要素
position:relative;
が指定されている- 日本語を入力する
デモを用意したのでsafariからアクセスして試してみてください。
https://codepen.io/KimTom/pen/poJNzqp
改行して日本語を入力するとボーダーが消えます。
開発者ツールを見るとdiv
タグが外されて中のテキストのみになっているのがわかると思います。
知りたいこと
position:relative;
を維持したまま、タグが外されるのを防ぐ方法をご教示いただければありがたいです。
解決方法はjsだとありがたいです。