为什么我的Contenteditable脱字号在Chrome中跳到了尽头？ [英] Why Is My Contenteditable caret Jumping to the End in Chrome?

问题描述

场景

我有一个内容可编辑的< div> 区域，在这个区域内，我可能会有一些< span contenteditable = false>< / span> 包含一些文本。想法是，这些span元素将代表无法编辑的样式化文本，但可以从< div contenteditable = true>< / div>



问题

光标位置是这里的大问题。如果删除这些< span> 元素之一，光标将跳到< div> 的末尾。更有趣的是，如果在光标位于末尾的情况下键入一些文本，则文本放置就很好了……然后，如果删除新键入的文本，则光标会跳回！

我准备了一个小提琴，这将证明这一点。 我需要此功能仅在Chrome中运行，并且其他浏览器暂时不关注或已找到解决方法。 （还请注意，准备好的Fiddle仅用于在Chrome中进行演示）。

问题385003：插入到达contenteditable元素中的行尾时，插入符号的样式错误

问题71598：在contentEditable末尾不可编辑元素之后的插入符号位置错误

我找到的最接近的SO解决方案可以是这里。此解决方案的想法是将& zwnj; 字符放在< span> 元素之后，但是如果我现在想删除我的< span> ，而是删除& zwnj; ...强制我的光标跳到最后，通过不删除初始删除键上的< span> 来提供怪异的UI体验。

问题

有人遇到此问题并找到解决方法吗？我欢迎任何可能的解决方案，即使JS hacky来了。我已经了解到，利用 contenteditable 会带来很多麻烦，但这似乎是我当前剩下的最后一个困难。

解决方案

我不知道为什么会发生这种情况，但是我觉得它与< div> ，所以我尝试使用 display 属性。将其设置为 inline-block 并稍微处理一下文字后，我发现在对它进行一些编辑（特别是添加新行）后，问题不再存在。

我看到由于某种原因，< br /> 标签保留在 div.main 删除新行后，但< div> 的外观及其对箭头键的响应方式是就像其中没有新行一样。

所以我用CSS更改和<$ c $中的< br /> 标记重新启动了提琴。 $ c> div.main 和中提琴！

因此可以得出结论：

1. 在 div.main
$ b $中添加 display：inline-block b
2. 在 div.main
$的末尾添加< br /> b $ b

JSFiddle链接

Scenario

I have a contenteditable <div> area, and within this area I may have some <span contenteditable="false"></span> containing some text. The idea is, these span elements will represent styled text that can not be edited, but may be deleted from the <div contenteditable="true"></div> area by pressing the backspace key.

Issue

The cursor placement is the big issue here. if you delete one of these <span> elements, the cursor jumps to the end of the <div>. More interesting, if you type some text while the cursor is "at the end," the text placement is just fine... Then, if you delete the newly typed text, the cursor jumps back!

I have prepared a fiddle which will demonstrate this. I need this to work only in Chrome, and other browsers are either of non-concern for now or have workarounds in place. (Also note the prepared Fiddle is crafted to demonstrate this in Chrome only).

Fiddle

---

Fiddle Instruction: Chrome Version 39.0.2171.95 m (64-bit) reproduced in 32-bit as well

1. Click into <div> area
2. Type "123"
3. Backspace "3" Backspace "2" Backspace "1"

---

Related Details

Researching this extensively, I have come across various SO question that are similar, but borrowing the associated solutions has not proved to be the silver bullet I am after. I have also found issues for the Chrome project which seem to target (perhaps not in the exact manner) the issue described above, and can be viewed below.

1. Issue 384357: Caret position inside contenteditable region with uneditable nodes
2. Issue 385003: Insert caret style is wrong when reaching the end of a line in a contenteditable element
3. Issue 71598: Caret in wrong position after non-editable element at the end of contentEditable

The closest SO solution I have found can be here. The idea in this solution is to place ‌ characters after the <span> elements, but if I want to now delete my <span>, I instead delete the ‌... forcing my cursor to jump to the end, offering a weird UI experience by not deleting my <span> on my "initial delete key stroke."

Question

Has anyone experienced this issue and found a work around? I welcome any possible solution, even as JS hacky as they come. I've come to learn that leveraging contenteditable comes with a laundry list of struggle, but this seems to be the last remaining difficulty I currently have.

解决方案

I don't know why this happens, but I had the feeling it has something to do with the sizing of the <div>, so I tried playing with the display property. After setting it to inline-block and playing a little with the text I found that the issue is gone after I make some edits to it, specifically adding a new line.

I saw that, for some reason, the <br/> tag is kept in div.main after I delete my new line, but the appearance of the <div> and the way it responds to arrow keys is the same as if there is no new line in it.

So I restarted the fiddle with the CSS change and a <br/> tag in div.main and viola!

So to conclude:

1. Add display: inline-block to div.main
2. add a <br/> at the end of div.main

JSFiddle Link

这篇关于为什么我的Contenteditable脱字号在Chrome中跳到了尽头？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！