Kapsamlı bir DIV'de imleç konumu nasıl bulunur?

Question

İçerik düzenlenebilir bir DIV için bir otomatik tamamlayıcı yazıyorum (metin kutusuna html içeriği oluşturması gerekiyor. Bu nedenle TEXTAREA üzerinden contenteditable DIV kullanmak tercih edilir). Şimdi DIV'de bir keyup/keydown/click olayı olduğunda imleç konumunu bulmam gerekiyor. Böylece html/metni o konumda ekleyebilirim. Bazı hesaplamalar ile nasıl bulabildiğim ya da içeriden okunabilir bir DIV'de imleç konumunu bulmama yardımcı olacak bir tarayıcı özelliği var.

Answer 1

Tek yapmanız gereken, imlecin içine biraz içerik eklemekse, konumunu açıkça bulmaya gerek yoktur. Aşağıdaki fonksiyonu tüm ana masaüstü tarayıcılarda İmleç konumuna bir DOM düğümü (öğesini veya metin düğümü) ekleyecektir:

function insertNodeAtCursor(node) { 
    var range, html; 
    if (window.getSelection && window.getSelection().getRangeAt) { 
     range = window.getSelection().getRangeAt(0); 
     range.insertNode(node); 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     html = (node.nodeType == 3) ? node.data : node.outerHTML; 
     range.pasteHTML(html); 
    } 
} 

Bunun yerine bir HTML dize eklemek istiyorsanız:

function insertHtmlAtCursor(html) { 
    var range, node; 
    if (window.getSelection && window.getSelection().getRangeAt) { 
     range = window.getSelection().getRangeAt(0); 
     node = range.createContextualFragment(html); 
     range.insertNode(node); 
    } else if (document.selection && document.selection.createRange) { 
     document.selection.createRange().pasteHTML(html); 
    } 
} 

GÜNCELLEME

OP'ın açıklamalarının ardından, IE için bir DOM Range gibi davranır TextRange nesne sarıcı ekler kendi Rangy kütüphane kullanmanızı öneririz. Bir DOM Range, her biri bir düğüm ve bu düğüm içindeki bir uzaklık cinsinden ifade edilen bir başlangıç ​​ve bitiş sınırından ve Aralığın manipüle edilmesi için bir grup metottan oluşur. MDC article, bir giriş sağlamalıdır.