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>

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Disney Pets and Animals

    Disney Pets

    29 ŞUBAT 2012
  • Jay Will

    Jay Will

    19 NİSAN 2006
  • Justin Schenck

    Justin Schen

    24 Kasım 2006