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ş:
Nasıl şapka işareti(imleç) doğal ses e...
iPhone - tüm UİWindow içinde UİView Po...
Div/span etiketi pozisyonu alın...
alın .içine css dosyası .daha az dosya...
Ters şapka bir karakter var mı?...