Nhận vị trí caret trong div Chỉnh sửa?

Thử đi:

Caret.js Nhận tư thế caret và offset từ trường văn bản

https://github.com/ichord/Caret.js

bản demo: http://ichord.github.com/Caret.js

Một vài nếp nhăn mà tôi không thấy được giải quyết trong các câu trả lời khác:

1. phần tử có thể chứa nhiều cấp nút con (ví dụ: nút con có nút con có nút con ...)
2. một lựa chọn có thể bao gồm các vị trí bắt đầu và kết thúc khác nhau (ví dụ: nhiều ký tự được chọn)
3. nút chứa một khởi đầu / kết thúc Caret có thể không phải là phần tử hoặc phần tử trực tiếp của nó

Đây là một cách để có được vị trí bắt đầu và kết thúc dưới dạng giá trị của giá trị textContent của phần tử:

// node_walk: walk the element tree, stop when func(node) returns false
function node_walk(node, func) {
  var result = func(node);
  for(node = node.firstChild; result !== false && node; node = node.nextSibling)
    result = node_walk(node, func);
  return result;
};

// getCaretPosition: return [start, end] as offsets to elem.textContent that
//   correspond to the selected portion of text
//   (if start == end, caret is at given position and no text is selected)
function getCaretPosition(elem) {
  var sel = window.getSelection();
  var cum_length = [0, 0];

  if(sel.anchorNode == elem)
    cum_length = [sel.anchorOffset, sel.extentOffset];
  else {
    var nodes_to_find = [sel.anchorNode, sel.extentNode];
    if(!elem.contains(sel.anchorNode) || !elem.contains(sel.extentNode))
      return undefined;
    else {
      var found = [0,0];
      var i;
      node_walk(elem, function(node) {
        for(i = 0; i < 2; i++) {
          if(node == nodes_to_find[i]) {
            found[i] = true;
            if(found[i == 0 ? 1 : 0])
              return false; // all done
          }
        }

        if(node.textContent && !node.firstChild) {
          for(i = 0; i < 2; i++) {
            if(!found[i])
              cum_length[i] += node.textContent.length;
          }
        }
      });
      cum_length[0] += sel.anchorOffset;
      cum_length[1] += sel.extentOffset;
    }
  }
  if(cum_length[0] <= cum_length[1])
    return cum_length;
  return [cum_length[1], cum_length[0]];
}

Kinda đến bữa tiệc muộn, nhưng trong trường hợp bất cứ ai khác đang vật lộn. Không có tìm kiếm Google nào tôi tìm thấy trong hai ngày qua đã tìm ra bất cứ thứ gì hoạt động, nhưng tôi đã đưa ra một giải pháp ngắn gọn và thanh lịch sẽ luôn hoạt động cho dù bạn có bao nhiêu thẻ lồng nhau:

cursor_position() {
    var sel = document.getSelection();
    sel.modify("extend", "backward", "paragraphboundary");
    var pos = sel.toString().length;
    console.log('pos: '+pos);
    if(sel.anchorNode != undefined) sel.collapseToEnd();

    return pos;
}

Nó chọn tất cả các cách trở về đầu đoạn và sau đó đếm độ dài của chuỗi để có được vị trí hiện tại và sau đó hoàn tác lựa chọn để trả con trỏ về vị trí hiện tại. Nếu bạn muốn làm điều này cho toàn bộ tài liệu (nhiều hơn một đoạn), sau đó thay đổi paragraphboundarythành documentboundaryhoặc bất kỳ mức độ chi tiết nào cho trường hợp của bạn. Kiểm tra API để biết thêm chi tiết . Chúc mừng! :)

function getCaretPosition() {
    var x = 0;
    var y = 0;
    var sel = window.getSelection();
    if(sel.rangeCount) {
        var range = sel.getRangeAt(0).cloneRange();
        if(range.getClientRects()) {
        range.collapse(true);
        var rect = range.getClientRects()[0];
        if(rect) {
            y = rect.top;
            x = rect.left;
        }
        }
    }
    return {
        x: x,
        y: y
    };
}

//global savedrange variable to store text range in
var savedrange = null;

function getSelection()
{
    var savedRange;
    if(window.getSelection && window.getSelection().rangeCount > 0) //FF,Chrome,Opera,Safari,IE9+
    {
        savedRange = window.getSelection().getRangeAt(0).cloneRange();
    }
    else if(document.selection)//IE 8 and lower
    { 
        savedRange = document.selection.createRange();
    }
    return savedRange;
}

$('#contentbox').keyup(function() { 
    var currentRange = getSelection();
    if(window.getSelection)
    {
        //do stuff with standards based object
    }
    else if(document.selection)
    { 
        //do stuff with microsoft object (ie8 and lower)
    }
});

Lưu ý: đối tượng phạm vi tự nó có thể được lưu trữ trong một biến và có thể được chọn lại bất cứ lúc nào trừ khi nội dung của div có thể thay đổi nội dung.

Tham khảo cho IE 8 trở xuống: http://msdn.microsoft.com/en-us/l Library / ms535872 (VS85) .aspx

Tham khảo cho các trình duyệt tiêu chuẩn (tất cả các loại khác): https://developer.mozilla.org/en/DOM/range (đó là các tài liệu mozilla, nhưng mã cũng hoạt động trong chrome, safari, opera và eg9)

Cái này hoạt động với tôi:

function getCaretCharOffsetInDiv(element) {
    var caretOffset = 0;
    if (typeof window.getSelection != "undefined") {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    }
    else if (typeof document.selection != "undefined" && document.selection.type != "Control")
    {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
    }
    return caretOffset;
} 

đường dây gọi phụ thuộc vào loại sự kiện, đối với sự kiện chính, hãy sử dụng:

getCaretCharOffsetInDiv(e.target) + ($(window.getSelection().getRangeAt(0).startContainer.parentNode).index());

cho sự kiện chuột sử dụng này:

getCaretCharOffsetInDiv(e.target.parentElement) + ($(e.target).index())

trong hai trường hợp này, tôi xử lý các dòng ngắt bằng cách thêm chỉ mục đích

Một cách thẳng thắn, lặp đi lặp lại qua tất cả các cheatren của div có thể nội dung cho đến khi nó chạm vào endContainer. Sau đó, tôi thêm phần bù container cuối và chúng ta có chỉ mục ký tự. Nên làm việc với bất kỳ số lượng tổ. sử dụng đệ quy.

Lưu ý: yêu cầu điền nhiều ví dụ để hỗ trợElement.closest('div[contenteditable]')

https://codepen.io/alockwood05/pen/vMpdmZ

function caretPositionIndex() {
    const range = window.getSelection().getRangeAt(0);
    const { endContainer, endOffset } = range;

    // get contenteditableDiv from our endContainer node
    let contenteditableDiv;
    const contenteditableSelector = "div[contenteditable]";
    switch (endContainer.nodeType) {
      case Node.TEXT_NODE:
        contenteditableDiv = endContainer.parentElement.closest(contenteditableSelector);
        break;
      case Node.ELEMENT_NODE:
        contenteditableDiv = endContainer.closest(contenteditableSelector);
        break;
    }
    if (!contenteditableDiv) return '';


    const countBeforeEnd = countUntilEndContainer(contenteditableDiv, endContainer);
    if (countBeforeEnd.error ) return null;
    return countBeforeEnd.count + endOffset;

    function countUntilEndContainer(parent, endNode, countingState = {count: 0}) {
      for (let node of parent.childNodes) {
        if (countingState.done) break;
        if (node === endNode) {
          countingState.done = true;
          return countingState;
        }
        if (node.nodeType === Node.TEXT_NODE) {
          countingState.count += node.length;
        } else if (node.nodeType === Node.ELEMENT_NODE) {
          countUntilEndContainer(node, endNode, countingState);
        } else {
          countingState.error = true;
        }
      }
      return countingState;
    }
  }

Vì điều này khiến tôi mất thời gian để tìm ra bằng cách sử dụng API window.getSelection mới mà tôi sẽ chia sẻ cho hậu thế. Lưu ý rằng MDN cho thấy có hỗ trợ rộng hơn cho window.getSelection, tuy nhiên, số dặm của bạn có thể thay đổi.

const getSelectionCaretAndLine = () => {
    // our editable div
    const editable = document.getElementById('editable');

    // collapse selection to end
    window.getSelection().collapseToEnd();

    const sel = window.getSelection();
    const range = sel.getRangeAt(0);

    // get anchor node if startContainer parent is editable
    let selectedNode = editable === range.startContainer.parentNode
      ? sel.anchorNode 
      : range.startContainer.parentNode;

    if (!selectedNode) {
        return {
            caret: -1,
            line: -1,
        };
    }

    // in case there is nested doms inside editable
    while(selectedNode.parentNode !== editable) {
        selectedNode = selectedNode.parentNode;
    }

    // select to top of editable
    range.setStart(editable.firstChild, 0);

    // do not use 'this' sel anymore since the selection has changed
    const content = window.getSelection().toString();
    const text = JSON.stringify(content);
    const lines = (text.match(/\\n/g) || []).length + 1;

    // clear selection
    window.getSelection().collapseToEnd();

    // minus 2 because of strange text formatting
    return {
        caret: text.length - 2, 
        line: lines,
    }
} 

Đây là một jsfiddle kích hoạt keyup. Tuy nhiên, lưu ý rằng việc nhấn phím định hướng nhanh, cũng như xóa nhanh dường như là bỏ qua các sự kiện.