質問編集履歴
3
iPhoneのsafariの情報を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
### 現象の説明
|
|
2
|
-
**
|
|
2
|
+
**macOSのsafari**でこの現象が発生しています。
|
|
3
3
|
`contenteditable`要素の中で以下の条件が揃うと自動でタグが外されてしまいます。
|
|
4
4
|
|
|
5
5
|
- ユーザが改行するなどして新しく生成された要素
|
|
@@ -11,5 +11,7 @@
|
|
|
11
11
|
改行して日本語を入力するとボーダーが消えます。
|
|
12
12
|
開発者ツールを見ると`div`タグが外されて中のテキストのみになっているのがわかると思います。
|
|
13
13
|
|
|
14
|
+
※FiroProchainezo様からiPhoneのsafariでは再現しないとの情報をいただきました。
|
|
15
|
+
|
|
14
16
|
### 知りたいこと
|
|
15
17
|
`position:relative;`を維持したまま、タグが外されるのを防ぐ方法をご教示いただければありがたいです。
|
2
markdownで装飾追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
### 現象の説明
|
|
2
|
-
safariのみで起こる現象です。
|
|
2
|
+
**safariのみ**で起こる現象です。
|
|
3
|
-
contenteditable要素の中で以下の条件が揃うと自動でタグが外されてしまいます。
|
|
3
|
+
`contenteditable`要素の中で以下の条件が揃うと自動でタグが外されてしまいます。
|
|
4
4
|
|
|
5
5
|
- ユーザが改行するなどして新しく生成された要素
|
|
6
|
-
- position:relative
|
|
6
|
+
- `position:relative;`が指定されている
|
|
7
7
|
- 日本語を入力する
|
|
8
8
|
|
|
9
9
|
デモを用意したのでsafariからアクセスして試してみてください。
|
|
10
10
|
[https://codepen.io/KimTom/pen/poJNzqp](https://codepen.io/KimTom/pen/poJNzqp)
|
|
11
11
|
改行して日本語を入力するとボーダーが消えます。
|
|
12
|
-
開発者ツールを見るとdivタグが外されて中のテキストのみになっているのがわかると思います。
|
|
12
|
+
開発者ツールを見ると`div`タグが外されて中のテキストのみになっているのがわかると思います。
|
|
13
13
|
|
|
14
14
|
### 知りたいこと
|
|
15
|
-
position:relative
|
|
15
|
+
`position:relative;`を維持したまま、タグが外されるのを防ぐ方法をご教示いただければありがたいです。
|
1
質問内容を簡潔になるよう修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
[html, css] contenteditable内の要素が削除されてしまう
|
body
CHANGED
|
@@ -12,7 +12,4 @@
|
|
|
12
12
|
開発者ツールを見るとdivタグが外されて中のテキストのみになっているのがわかると思います。
|
|
13
13
|
|
|
14
14
|
### 知りたいこと
|
|
15
|
-
position:relative を維持したまま、タグが外されるのを防ぐ方法があれば知りたいです。
|
|
15
|
+
position:relative を維持したまま、タグが外されるのを防ぐ方法があれば知りたいです。
|
|
16
|
-
（できればjsによる解決策があれば嬉しいです）
|
|
17
|
-
|
|
18
|
-
というかこれはsafariのバグなんでしょうか？
|