2

spancontenteditableのタグでカーソルをラップしようとしていますdiv。

例（で表されるカーソル|）：

  • 前：

The fox jumps |

  • 後：

The fox jumps <span>|</span>

innerHTMLを変更しようとすると、カーソルが行の終わりに移動します。新しいHTMLの間に挿入してほしいspan。

4

3 に答える 3

1

実装上の問題があるため、これはクロスブラウザでは不可能です。WebKitとIEの両方で、などの空のインライン要素内にカレットを配置しようとすると、<span>実際には要素の直前にカレットが配置されます。以下はこれを示しています。Firefoxで期待することはできますが、WebKitやIEではできません。

http://jsfiddle.net/8TTb3/1/

DOM範囲とSelectionAPIを使用して、キャレット位置に要素を挿入できます。ただし、IE <9では、これらをサポートせず、代わりに独自のAPIがあります。

コード：

var range = sel.getRangeAt(0);
var span = document.createElement("span");
range.insertNode(span);
range.setStart(span, 0);
range.setEnd(span, 0);
sel.removeAllRanges();
sel.addRange(range);
于 2012-11-26T10:01:15.360 に答える
1

実際には、あなたはトリックを行うことができます：

var range = sel.getRangeAt(0);
var span = document.createElement("span");
span.innerHTML = "&#8203;";
range.insertNode(span);
range.setStart(span, 0);
range.setEnd(span, 1);
sel.removeAllRanges();
sel.addRange(range);

Chromeで動作します：http：//jsfiddle.net/8TTb3/8/

于 2014-11-27T08:53:20.693 に答える
0

制御できるのは、divの（解析済みの）コンテンツ内のカーソルの位置だけです。そこにスパンを入れると、ブラウザによってカーソルが挿入される前に解析されます。その時点で、カーソルはその前または後になります。

いいえ、これは不可能だと思います。

于 2012-11-25T22:19:04.640 に答える