2017-06-16 24 views
2

Chrome(と多分他のブラウザ)は、contenteditable div内で奇妙な方法でキャレットを配置します。このJSFiddlecontenteditable divでキャレットの位置がオフになっています

<div contenteditable="true" style="width: 100%; height: 200px; border: 1px solid black; overflow: auto;"> 
    <p> 
     <span contenteditable="false" style="width: 75%; height: 80px; display: inline-block; border: 1px solid red;">&nbsp;</span>. 
    </p> 
</div> 

もご利用いただけます:

次のスニペットを考えてみてください。

赤いスパンの隣にあるピリオドの右側をクリックし、バックスペースを押してピリオドを削除すると、そのキャレットは突然段落の右端に移動します。私はキャレットが、赤のスパンの隣にあった、その時代のどこに位置するのだろうと思っています。

私は、それが私の予想通りに配置されていないと私は探している行動を得るための方法はありますか?

答えて

2

この奇妙な現象は、pタグにより起こっている、原因はおそらく幅の間にいくつかの競合である、あなたの代わりにdisplay:block(デフォルト)を使用しての、display:inlineを使用し、タグのCSSを編集することができます。

私はこのフィドルを作成しました:JsFiddledisplay:inlineは、display:blockから最も近いものでした。

私はalign属性を試しましたが、成功しませんでした。

1

私はそれが原因でスパンだとかなり確信しています。あなたがそれを取り除いた瞬間、またはdisplay: noneでもそれが問題になります。私は自分自身について本当に好奇心を持っていて、何人かの検索をしました。この人はあなたと同じ問題を抱えているようです。

Why Is My Contenteditable Cursor Jumping to the End in Chrome?

1

非破りスペース、彼らはのように聞こえるだけで何です - 改行が発生しませんスペース。単語、文、または要素の間にスペースを追加するためにそれらを使用しないでください。特に要素ではない。

削除& nbsp; (宇宙を持っているか、実際にはスペースを作る:D)、すべてが良い。

関連する問題