HTML5ののcontentEditable - 私は一種のようなタグ/セパレーターを表しのcontentEditable要素内のスパンを配置しようとしている編集不可の表示ブロック要素

Question

の前にカーソルを置く：

.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要素の前後にテキストを編集しようとしていますが、要素の直前にカーソルを置くことは不可能です。 スパン要素のスタイルを設定して、その周りのより柔軟なカーソルの動きを可能にする方法。

FIDDLE

Answer 1

これらのスタイルを使用します。

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

Answer 2

スパンコンテンツを編集するためのイベントを抑制してみます。私はspan要素と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>