HTML5 CONTENTEDITABLE - 放置光標的非可編輯顯示塊元件

Question

我試圖放置哪些種類的代表標籤/分離器作爲這樣的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

Answer 1

使用這些樣式：

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

Answer 2

嘗試抑制事件編輯跨度內容。我被迫分開跨度和div元素，但它在IE11中正常工作，即使它們在一起時也是如此。我認爲，在其他瀏覽器中存在攔截問題。但這個想法似乎很清楚。你唯一需要做的就是改變你的風格，讓它顯示以前的樣子。

function handle(e) 
 
{ 
 
\t if (e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40 && e.keyCode != 37) 
 
\t 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>