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

  • Glove and Boots

    Glove and Bo

    1 ŞUBAT 2007
  • inovationgmbh

    inovationgmb

    28 EYLÜL 2010
  • Ordetta Price

    Ordetta Pric

    12 EYLÜL 2011