Skip to main content
本文に 52 文字追加; タグを編集
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

teratailにも同様の質問をteratailにも同様の質問しましたが回答が得られなかったためこちらに質問させていただきます。
どなたかわかる方、教えていただけると嬉しいです。


現象の説明

safariのみで起こる現象です。
contenteditable要素の中で以下の条件が揃うと自動でタグが外されてしまいます。

  • ユーザが改行するなどして新しく生成された要素
  • position:relative;が指定されている
  • 日本語を入力する

デモを用意したのでsafariからアクセスして試してみてください。
https://codepen.io/KimTom/pen/poJNzqp
改行して日本語を入力するとボーダーが消えます。
開発者ツールを見るとdivタグが外されて中のテキストのみになっているのがわかると思います。


知りたいこと

position:relative;を維持したまま、タグが外されるのを防ぐ方法をご教示いただければありがたいです。
解決方法はjsだとありがたいです。

teratailにも同様の質問をしましたが回答が得られなかったためこちらに質問させていただきます。
どなたかわかる方、教えていただけると嬉しいです。


現象の説明

safariのみで起こる現象です。
contenteditable要素の中で以下の条件が揃うと自動でタグが外されてしまいます。

  • ユーザが改行するなどして新しく生成された要素
  • position:relative;が指定されている
  • 日本語を入力する

デモを用意したのでsafariからアクセスして試してみてください。
https://codepen.io/KimTom/pen/poJNzqp
改行して日本語を入力するとボーダーが消えます。
開発者ツールを見るとdivタグが外されて中のテキストのみになっているのがわかると思います。


知りたいこと

position:relative;を維持したまま、タグが外されるのを防ぐ方法をご教示いただければありがたいです。
解決方法はjsだとありがたいです。

teratailにも同様の質問しましたが回答が得られなかったためこちらに質問させていただきます。
どなたかわかる方、教えていただけると嬉しいです。


現象の説明

safariのみで起こる現象です。
contenteditable要素の中で以下の条件が揃うと自動でタグが外されてしまいます。

  • ユーザが改行するなどして新しく生成された要素
  • position:relative;が指定されている
  • 日本語を入力する

デモを用意したのでsafariからアクセスして試してみてください。
https://codepen.io/KimTom/pen/poJNzqp
改行して日本語を入力するとボーダーが消えます。
開発者ツールを見るとdivタグが外されて中のテキストのみになっているのがわかると思います。


知りたいこと

position:relative;を維持したまま、タグが外されるのを防ぐ方法をご教示いただければありがたいです。
解決方法はjsだとありがたいです。

ソース リンク

safari で contenteditable 内の要素が削除されてしまう

teratailにも同様の質問をしましたが回答が得られなかったためこちらに質問させていただきます。
どなたかわかる方、教えていただけると嬉しいです。


現象の説明

safariのみで起こる現象です。
contenteditable要素の中で以下の条件が揃うと自動でタグが外されてしまいます。

  • ユーザが改行するなどして新しく生成された要素
  • position:relative;が指定されている
  • 日本語を入力する

デモを用意したのでsafariからアクセスして試してみてください。
https://codepen.io/KimTom/pen/poJNzqp
改行して日本語を入力するとボーダーが消えます。
開発者ツールを見るとdivタグが外されて中のテキストのみになっているのがわかると思います。


知りたいこと

position:relative;を維持したまま、タグが外されるのを防ぐ方法をご教示いただければありがたいです。
解決方法はjsだとありがたいです。