Редактируемая ячейка td таблицы HTML получает позицию курсора

Как можно прочитать фактическую позицию курсора внутри редактируемой ячейки td (contenteditable="true") из функции, обрабатывающей событие «onkeypress»?

Я ищу что-то похожее на свойство «selectionStart» при нажатии где-нибудь внутри поля ввода текста.


person RickyTad    schedule 07.12.2018    source источник
comment
Возможный дубликат выделения текста, доступного для редактирования, не работает   -  person rafaelcastrocouto    schedule 07.12.2018


Ответы (1)


Я нашел ответ здесь, надеюсь, вам поможет

function getCaretCharacterOffsetWithin(element) {
      var caretOffset = 0;
      var doc = element.ownerDocument || element.document;
      var win = doc.defaultView || doc.parentWindow;
      var sel;
      if (typeof win.getSelection != "undefined") {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
          var range = win.getSelection().getRangeAt(0);
          var preCaretRange = range.cloneRange();
          preCaretRange.selectNodeContents(element);
          preCaretRange.setEnd(range.endContainer, range.endOffset);
          caretOffset = preCaretRange.toString().length;
        }
      } else if ((sel = doc.selection) && sel.type != "Control") {
        var textRange = sel.createRange();
        var preCaretTextRange = doc.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd", textRange);
        caretOffset = preCaretTextRange.text.length;
      }
      return caretOffset;
    }

    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;
    }

    function showCaretPos() {
      var el = document.getElementById("test");
      var caretPosEl = document.getElementById("caretPos");
      caretPosEl.innerHTML = "Caret position: " + getCaretPosition(); //getCaretCharacterOffsetWithin(el);
    }

    document.body.onkeyup = showCaretPos;
    document.body.onmouseup = showCaretPos;

https://codepen.io/neoux/pen/OVzMor

person Kent Ng    schedule 05.11.2019