HTML5 contenteditable - 将光标放在不可编辑的显示块元素之前答案

【问题标题】：HTML5 contenteditable - placing the cursor before a non editable display block elementHTML5 contenteditable - 将光标放在不可编辑的显示块元素之前
【发布时间】：2016-11-08 15:49:57
【问题描述】：

我正在尝试在 contenteditable 元素中放置一个跨度，该元素代表一个标签/分隔符：

.tag {
  display:block;
  background-color:red;
}

.edit-box{
  border: 1px solid black;
  padding: 10px;
}

<div id="test" contenteditable="true" class="edit-box">
    <span class="tag" contenteditable="false">NON EDITABLE</span>How to style the span element so it's possible to place the cursor at the start?
</div>

我正在尝试在 span 元素之前和之后编辑文本，但无法将光标放在元素之前。任何想法如何设置 span 元素的样式以允许在它周围更灵活的光标移动。

FIDDLE

【问题讨论】：

display: inline-block; ?
@Maximus er .. 我真笨。确切地说，将宽度设置为 100% 可以解决它。您可以发布答案，以便我将其标记为解决方案吗？
当然，发布我的答案:)

标签： css html contenteditable

【解决方案1】：

使用这些样式：

.tag {
  display:inline-block;
  width:100%;
  background-color:red;
}

【讨论】：

【解决方案2】：

尝试抑制事件以编辑跨度内容。我不得不将 span 和 div 元素分开，但它在 IE11 中可以正常工作，即使它们在一起也是如此。我认为，在其他浏览器中存在拦截问题。但这个想法似乎很清楚。你唯一需要做的就是改变你的风格，让它以以前的方式显示。

function handle(e)
{
	if (e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40 && e.keyCode != 37)
	return false;
}

.tag {
  display:block;
  background-color:red;
}

.edit-box{
  border: 1px solid black;
  padding: 10px;
}

<span class="tag" contenteditable="true" onkeydown="return handle(event)">NON EDITABLE</span>
<div id="test" contenteditable="true" class="edit-box">How to style the span element so it's possible to place the cursor before?
</div>

【讨论】：

span 元素应该在 contenteditable div 内。你可以把它想象成一个标签。我希望能够移动光标，以便可以在标记前后键入文本。