Nhận nội dung Vị trí chỉ mục dấu mũ có thể sửa đổi

Tôi đang tìm rất nhiều điều hay, trình duyệt chéo về cách ĐẶT vị trí chỉ mục con trỏ hoặc dấu mũ trong một contentEditablephần tử, nhưng không có gì về cách TẢI hoặc tìm chỉ mục của nó ...

Những gì tôi muốn làm là biết chỉ số của dấu mũ trong div này, trên keyup.

Vì vậy, khi người dùng đang nhập văn bản, tôi có thể biết chỉ số con trỏ của nó trong contentEditablephần tử bất kỳ lúc nào .

CHỈNH SỬA: Tôi đang tìm INDEX trong nội dung div (văn bản), không phải tọa độ con trỏ.

<div id="contentBox" contentEditable="true"></div>

$('#contentbox').keyup(function() { 
    // ... ? 
});

Đoạn mã sau giả định:

• Luôn có một nút văn bản duy nhất trong phần có thể chỉnh sửa <div>và không có nút nào khác
• Div có thể chỉnh sửa không có thuộc tính CSS white-spaceđược đặt thànhpre

Nếu bạn cần một cách tiếp cận tổng quát hơn sẽ phù hợp với nội dung với các phần tử lồng nhau, hãy thử câu trả lời sau:

https://stackoverflow.com/a/4812022/96100

Mã:

function getCaretPosition(editableDiv) {
  var caretPos = 0,
    sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.rangeCount) {
      range = sel.getRangeAt(0);
      if (range.commonAncestorContainer.parentNode == editableDiv) {
        caretPos = range.endOffset;
      }
    }
  } else if (document.selection && document.selection.createRange) {
    range = document.selection.createRange();
    if (range.parentElement() == editableDiv) {
      var tempEl = document.createElement("span");
      editableDiv.insertBefore(tempEl, editableDiv.firstChild);
      var tempRange = range.duplicate();
      tempRange.moveToElementText(tempEl);
      tempRange.setEndPoint("EndToEnd", range);
      caretPos = tempRange.text.length;
    }
  }
  return caretPos;
}

#caretposition {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contentbox" contenteditable="true">Click me and move cursor with keys or mouse</div>
<div id="caretposition">0</div>
<script>
  var update = function() {
    $('#caretposition').html(getCaretPosition(this));
  };
  $('#contentbox').on("mousedown mouseup keydown keyup", update);
</script>

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 mức nút con (ví dụ: các nút con có các nút con có cá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 có chứa đầu / cuối Dấu mũ có thể không phải là phần tử hoặc con trực tiếp của nó

Đây là một cách để lấy các vị trí bắt đầu và kết thúc làm phần bù cho 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]];
}

Thử cái này:

Caret.js Nhận vị trí dấu mũ và bù đắp từ trường văn bản

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

demo: http://ichord.github.com/Caret.js

Kinda đến bữa tiệc muộn, nhưng trong trường hợp có ai khác đang gặp khó khăn. Không có tìm kiếm nào trên Google mà tôi tìm thấy trong hai ngày qua không đưa ra được bất kỳ điều gì hiệu quả, 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:

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

    return pos;
}

// Demo:
var elm = document.querySelector('[contenteditable]');
elm.addEventListener('click', printCaretPosition)
elm.addEventListener('keydown', printCaretPosition)

function printCaretPosition(){
  console.log( cursor_position(), 'length:', this.textContent.trim().length )
}

<div contenteditable>some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text</div>

Nó chọn tất cả các cách trở lại đầ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 để đưa con trỏ trở lại vị trí hiện tại. Nếu bạn muốn thực hiện việc này cho toàn bộ tài liệu (nhiều hơn một đoạn văn), hãy 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
    };
}

window.getSelection - so với - document.selection

Cái này phù hợp với tôi:

function getCaretCharOffset(element) {
  var caretOffset = 0;

  if (window.getSelection) {
    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 (document.selection && 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;
}


// Demo:
var elm = document.querySelector('[contenteditable]');
elm.addEventListener('click', printCaretPosition)
elm.addEventListener('keydown', printCaretPosition)

function printCaretPosition(){
  console.log( getCaretCharOffset(elm), 'length:', this.textContent.trim().length )
}

<div contenteditable>some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text</div>

Dòng 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 điều này:

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

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

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

trong hai trường hợp này, tôi quan tâm đến các dòng ngắt bằng cách thêm chỉ mục mục tiêu

//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ự của nó có thể được lưu trữ trong một biến và có thể được chọn lại bất kỳ lúc nào trừ khi nội dung của div có thể thay đổi nội dung.

Tham chiếu cho IE 8 trở xuống: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

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

Vì điều này khiến tôi mất nhiều thời gian để tìm ra 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ó sự hỗ trợ rộng rãi hơn cho window.getSelection, tuy nhiên, quãng đường 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,
        };
    }

    // 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 khi gõ phím . Tuy nhiên, lưu ý rằng các thao tác nhấn phím hướng nhanh, cũng như xóa nhanh dường như bỏ qua các sự kiện.

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

Lưu ý: yêu cầu điền poly cho tức là để 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;
    }
  }