1

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


現象の説明

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

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

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


知りたいこと

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

1 件の回答 1

1

質問文に載っている teratail の Eggpan さんの回答によって、この質問は解決しています。その回答では、改行する際にゼロ幅スペースを挿入し、後々ゼロ幅スペースを削除する、といった方針で問題を解決しているようです[1]

[html, css] contenteditable内の要素が削除されてしまう[1]

行頭で何も文字が入っていない場合に日本語入力すると発生する問題のようなので、
いっそ改行時にゼロ幅スペースを埋めておく、とかはどうでしょうか。

const el = document.querySelector('.pos-rel')

el.addEventListener("keyup", event => {
  if (event.keyCode === 13) {
    document.execCommand('insertText', false, '\u200B')
  }
});

CodePen

ゼロ幅スペースは画面には見えませんが文字ではあるので、どこかのタイミングで削除する必要はあるかと思います。
また、挿入されたゼロ幅スペースを削除したあとで日本語入力されてしまうと同様の事象は発生してしまいます。

ContentEditable自体ブラウザで動作が違ったり、変な挙動が多くて広く使われてない感があるので、ある程度泥臭い対応になりそうかなとは思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。