4

テキストフローにタグ"<p><font><br>"などのインラインhtml要素を含めるオプションがあるcontenteditabledivを使用しています。

ある時点で、contenteditable divのcaret位置（カーソル位置）を取得する必要があります。caret（カーソル）はhtml子要素の後にあります。

Firefoxのjavascriptで次のコードを使用していますが、contenteditable divのキャレット位置（カーソル位置）を見つけるのに正しく機能しますが、Internet Explorerwindow.getSelectionが未定義のキャレット位置（カーソル位置）を見つけるためのソリューションが見つかりません。

function getCaretPosition() {
     if (window.getSelection && window.getSelection().getRangeAt) {
          var range = window.getSelection().getRangeAt(0);
          var selectedObj = window.getSelection();
          var rangeCount = 0;
          var childNodes = selectedObj.anchorNode.parentNode.childNodes;
          for (var i = 0; i < childNodes.length; i++) {
               if (childNodes[i] == selectedObj.anchorNode) {
                   break;
               }
               if (childNodes[i].outerHTML)
                    rangeCount += childNodes[i].outerHTML.length;
               else if (childNodes[i].nodeType == 3) {
                    rangeCount += childNodes[i].textContent.length; 
               }
          }
          return range.startOffset + rangeCount;
    }
    return -1;
}

document.selection; Internet Expolrerで動作することがわかりましたが、contenteditable divのcaret位置（カーソル位置）を見つけるのはうまくいかないと思います。

誰かが私のために何か回避策を持つことができますか？

以下の例では、カーソル位置は<p> two </p>の「t」と「w」の間 <div contenteditable="true"><p>one<br><b>t|wo</b></p></div>にあります。このcontenteditabledivを使用している時点で何らかの操作を実行する必要があるため、上記の例では14番が必要だと思います。私のカスタムスタイルのRichTextboxがそれに適用されるように

4

1 に答える 1

4

こんにちは私はInternetExplorerバージョン8以下の答えを見つけました

       var cursorPosition=0;    
       if (document.selection && document.selection.createRange) {
            range = document.selection.createRange();
            if (range.parentElement() == YourEditableControl) {
                var tmpEle = document.createElement("span");
                YourEditableControl.insertBefore(tmpEle, YourEditableControl.firstChild);
                var tmpRange = range.duplicate();
                tmpRange.moveToElementText(tmpEle);
                tmpRange.setEndPoint("EndToEnd", range);
                cursorPosition= tmpRange.text.length;
            }
        }

上記のコードは私の問題を解決し、window.getSelection（）がIE8以下では未定義であり、IE9で正常に動作するため、IE8以下のバージョンの現在のカーソル位置を見つけます

したがってdocument.selection、selectionオブジェクトとrangeオブジェクトを使用して、現在のキャレットまたはカーソル位置フォームcontenteditable divまたはその他のコントロールを取得できます。

これがお役に立てば幸いです

于 2012-06-06T12:30:03.843 に答える