0

contenteditable div 内にスパンがあり、カーソルがスパン タグの最後の位置にあるかどうかを確認する必要があります。選択と範囲のソリューションを調べましたが、それを達成する簡単な方法がわかりませんでした。

<html>
    <script>
        var selection =  window.getSelection();
        var range = selection.getRangeAt(0);
        //this is what I am trying to achive
        var selection_target = range.selectNodeContents(document.getElementById('target')); 
        var length = selection_target.toString().length;

     </script>
     <body>  
          <div id='target' contenteditable='true'>
             <span>some text(figure cursor position here)</span>
          </div>
      </body>
</html>
4

1 に答える 1

0

スパンにテキスト ノードである子が 1 つしかない質問の場合、キャレットが末尾にあるかどうかを次のように確認できます。

デモ: http://jsfiddle.net/Wm5Hz/

コード：

var span = document.getElementById("target").getElementsByTagName("span")[0];
var spanTextNode = span.lastChild;
var sel = window.getSelection();
var isCaretAtEndOfSpan = (sel.isCollapsed
    && sel.focusNode == spanTextNode
    && sel.focusOffset == spanTextNode.data.length);

一般的なケースでは、状況は少し複雑になります。同じ視覚的位置をさまざまな方法で表すことができます (たとえば、テキスト ノードの最後の文字の後、テキスト ノード自体の後、スパンの終わりの後)。要素が含まれている場合は、スパン内の最後のテキスト ノードを見つけて、それに対して選択を比較する必要があります。また、まったく異なる API を持つ IE < 9 では、これはどれも機能しません。

于 2012-09-25T09:10:32.197 に答える