İçerik düzenlenebilir bir div içinde imleç satırı ve sütunu alın

Kullanıcı içerik olarak düzenlenebilir bir divta metin yazdıkça imleç konumunu bulmak için çeşitli tarifler vardır, ancak bunların hiçbirini işe alamıyorum. Aslında en basit koddan en şaşırtıcı sonuçları aldım; Aşağıdaki kod parçacığında, bazı metinleri eklerseniz ve ardından onu kaldırmak için geri aldığınızda, startoffset'iniz gerçekten artar! (Bölme öğelerini veya bir şeyleri hayal edebilirim ve ofset yazdırılamayan etiketler veya bir şey içerebilir.)İçerik düzenlenebilir bir div içinde imleç satırı ve sütunu alın

Sabit bir yazı tipine sahip olacak ancak sözdizimi vurgulamayı planladığım bir div'um var (bunun bir şey değil sadece yapmak; onun daha interaktif istemi düzenleme ile her yerde senaryodaki kılan bu tür bir pozisyon kendim almak istiyorum am neden sezerlerse)

<html> 
<head> 
<script type="text/javascript"> 
<!-- 
var ta = null; 

function onKeypress(event) { 
    var range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeypress = onKeypress; 
} 
//--> 
</script> 
<body onload="init();"> 
<noscript> 
Sorry, you need javascript. Not much to see here otherwise; move along. 
</noscript> 
<p id="msg"></p><hr/> 
<div id="ta" contenteditable="true" style="width:100%; height:100%; font-family: courier;"> 
</div> 
</body> 
</html>

nasıl satır ve sütun biliyorum ve metin alabilirsiniz. herhangi bir satır için, böyle bir içerikte düzenlenebilir div?

kaynak

2012-03-31 Will

Ne diyorsun kodunuzda yanlış olduğundan emin değilim. Örnek kodunuzu Chrome'da test ettiğimde, kod işe yarıyor gibi görünüyor - geri adım attığımda, konum gösterimi div'a daha fazla metin yazmaya başlayana kadar güncellenmiyor, ancak daha sonra konum göstergesi tekrar doğrudur. Backspace, keyup olayını veya eksik olduğum başka bir şeyi tetiklemiyor mu? – Griffin

Ah, galiba anladım, bir cevap yazdım. – Griffin

-1

Div'ler yerine metin kutuları kullanmayı düşündünüz mü?

<textbox>edit my content</textbox>

Eğer (bir onkeydown için onkeypress değişen üzerine innerHTML özelliği

alert(document.getElementById('theIdOfMyDiv').innerHTML);

veya eklemek için içerik

var currentContent = document.getElementById('theIdOfMyDiv').innerHTML; 
currentContent = currentContent + 'add some content';

kaynak

2012-04-01 10:42:53 codelove

Soruyu okudunuz mu? – Griffin

+1 giriş tuşuna basarsanız ne olur? – codelove

ile içeriğini almak ve güncelleyebilirsiniz bir div kullanmanız gerekiyorsa böylece backspace yakalanır) Bir backspace girildiğinde pozisyon göstergesinin bir kez arttığını görüyorum.

ben yanlış sonuna sopa var beni affet, ama bir çözüm aşağıdaki yapılmadığına inanıyoruz:

var ta = null; 
var range = null; 

function onKeyDown(event) { 
    if(event.which != 8 && event.which != 46) { 
     range = window.getSelection().getRangeAt(0); 
     document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
    } 
} 

function onKeyUp(event) { 
    range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeydown = onKeyDown; 
    ta.onkeyup = onKeyUp; 
}

kaynak

2012-04-01 15:29:26 Griffin

sorusunu anlamak için – Will

Sıfırdan tekrar saymaya başlar. imlecin hangi satırda olduğunu görüntülemek için kodunuzda hiçbir şey yoktur. – Griffin

ama bu daha büyük soru! "Satır ve sütunları nasıl bilebilirim ve herhangi bir satırın metnini bu tür içerikte düzenlenebilir bir divda nasıl alabilirim?". Bu, zengin bir metin editörüne olduğu gibi, kullanıcı her tuşa bastığında, hangi satırın açık olduğunu ve satır içeriğinin ne olduğunu bilmek istiyorum. – Will

İçerik düzenlenebilir bir div içinde imleç satırı ve sütunu alın

cevap

İlgili konular