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

  • Dan Gately

    Dan Gately

    13 AĞUSTOS 2006
  • Paulo Bautista

    Paulo Bautis

    21 Aralık 2008
  • RocketJump

    RocketJump

    22 ŞUBAT 2006