为什么我的可信游标在Chrome中跳到最后？ [英] Why Is My Contenteditable Cursor Jumping to the End in Chrome?

问题描述

场景

我有一个contenteditable < div> 区域，在这个区域内可能会有一些< span contenteditable =false>< / span> 包含一些文字。想法是，这些span元素将表示不能编辑的样式文本，但可以从< div contenteditable =true>< / div> 区域，然后按退格键。

问题

游标位置为这是个大问题。如果删除这些< span> 元素中的一个，则光标跳转到< div> 。更有趣的是，如果你在光标处于最后时键入一些文本，文本的位置就好了......然后，如果你删除了新输入的文本，光标就跳回来了！

我准备了一把小提琴来演示这个。 我只需要在Chrome浏览器中工作，其他浏览器目前无需担心，或者有解决方法。

Issue 385003 ：插入插入符号样式在达到可用元素中的行尾时是错误的

问题71598：在contentEditable结束时出现不可编辑的元素后插入错误的位置

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

问题

有没有人遇到过这个问题，并找到解决办法？我欢迎任何可能的解决方案，即使他们来到JS hacky。我已经了解到，利用 contenteditable 带来了一系列的挣扎，但这似乎是我目前拥有的最后一个难题。

解决方案

我不知道为什么会发生这种情况，但我觉得它与< div> ，所以我试着玩 display 属性。将其设置为 inline-block 并在文本中稍微播放一下之后，我发现在对其进行了一些编辑后，问题消失了，特别是添加了新行。





我发现，出于某种原因，< br /> 标签保存在 div.main 在删除我的新行后，但是< div> 的外观以及它响应箭头键的方式是就好像没有新线一样。

因此，我重新开始了CSS变化，并在<$ c中添加了一个< br /> 标签

所以得出结论：

1. 添加 display：inline-block 至 div.main


2. 在 div.main
$的结尾处添加< br /> b $ b

JSFiddle Link

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

这篇关于为什么我的可信游标在Chrome中跳到最后？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！