Doğal ses div şapka pozisyonu alın

SORU

19 EKİM 2010, Salı

Doğal ses div şapka pozisyonu alın

Doğal ses bir DİV imleç veya şapka konumu AYARLAMAK için ne kadar iyi, crossbrowser bölgedeki okullarda da ilk sıraları ton veya konumunu bulmak için nasıl hiçbir şey bulamayınca ben

Yapmak istediğim şey keyup bu div içinde şapka pozisyonu, biliyorum.

Kullanıcı metin yazarken, herhangi bir noktada div içinde imlecin konumunu biliyorum.

Div içerdiği ENDEKSİ (metin) arıyorum, imleç koordinatları değil. EDİT:

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

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

CEVAP

20 EKİM 2010, ÇARŞAMBA

Aşağıdaki kodu varsayar:

Her zaman düzenlenebilir içinde tek bir metin düğümü <div> ve diğer düğümler yoktur
Düzenlenebilir div pre white-space özellik CSS kümesi yok

Kod:

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>