在HTML TextArea中設置（或讀取）Cursor / Caret的值

Question

我正在嘗試（並且失敗）將拖放機制實現為HTML textarea。

使用jQuery或Scriptaculous（我們同時使用）時，拖放機制相對容易，因此我願意接受使用這兩種方式之一的答案。

問題是，我似乎找不到找到讀取或設置插入點的方法。

我最終想要做的是確定放置位置，進行某種數學計算以確定文本區域上的確切位置，然后設置插入標記位置（或插入點），然后在其中放置（插入）放置的文本。

我可以處理這些計算，我只需要知道如何讀取和設置插入標記的位置（最終將成為插入文本的插入點）。 這有可能嗎？

謝謝 -

Answer 1

我通過在此處拼湊了一些代碼片段和想法來解決了這個問題。 這是我解決這個問題的方法：

1. 我把我想讓拖動文本的每個部分成跨度類“draggable_text”的

2. 每次觸發鼠標懸停/鼠標懸停時，使用jquery（在文檔就緒功能中）自動選擇/取消選擇范圍內的文本。

..這是代碼：

$(document).ready (

    $('.draggable_text').mouseover(
        function () {
          selectNode(this);
        }
    );

    $('.draggable_text').mouseout(
        function () {
          clearSelection(this);
        }
    );

);

function selectNode (node) {
    var selection, range, doc, win;
    if ( (doc = node.ownerDocument) 
          && (win = doc.defaultView) 
          && typeof win.getSelection != 'undefined' 
          && typeof doc.createRange != 'undefined' 
          && (selection = window.getSelection()) 
          && typeof selection.removeAllRanges != 'undefined'
        ) {
        range = doc.createRange();
        range.selectNode(node);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if ( document.body 
                && typeof document.body.createTextRange != 'undefined' 
                && (range = document.body.createTextRange()) ) {
        range.moveToElementText(node);
        range.select();
    }
}

function clearSelection () {
    if (document.selection) {
        document.selection.empty();
    } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
    }
}

有趣的是，使用這種方法，無需實現特殊的拖放機制-似乎瀏覽器會自動將您將選定的文本拖到文本區域中，並希望將其復制到此處。 完善！

我在FF3，IE6和IE7（WinXP和Vista）上對此進行了測試。 拖放圖形在每一個上都稍有不同，但是全部起作用。

Answer 2

我建議從閱讀JS中的Range對象開始，請參見http://www.quirksmode.org/dom/range_intro.html

Answer 3

既然您提到您使用的是jQuery，我建議您看一下FieldSelection插件。 該插件將幫助您獲取有關光標當前放置位置的信息。

為了設置光標位置，我使用以下功能：

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

您可以使用setCaretToPos函數，如下所示：

setCaretToPos(document.getElementById("textareaId"), 4);