Bir contentEditable div'in sonuna imleç konumunu ayarlamanız gerekiyor, seçim ve aralıklı nesnelerle ilgili sorun

Question

Şu anda tarayıcılar arası uyumluluğunu unutuyorum, bunun işe yaramasını istiyorum. Yaptığım şey, bir komut dosyasını değiştirmeye çalışmak (ve muhtemelen bunu bilmenize gerek yok) typegreek.com adresinde yer almaktadır. Temel komut dosyası here bulunur. Temelde yaptıklarınız, karakterleri yazarken, yazdığınız karakterleri Yunanca karakterlere dönüştürür ve ekrana yazdırır. Yapmaya çalıştığım şey, contentEditable div's (yalnızca Textareas için çalışır) üzerinde çalışmasını sağlamaktır

Sorunum bu tek işlevle ilgilidir: Kullanıcı bir anahtar yazdığında, bir Yunan anahtarına dönüştürülür ve bir işleve gider, eğer bazılarına göre sıralanır ve bittiği yerde div desteğini ekleyebilirim. Şimdiye kadar sahip olduğum şey şu:

myField, div, myValue, Yunanca karakterdir. Bu, yalnızca, orijinal metnin boyutundan daha fazla yazmamam sürece çalışır. Bu, yalnızca bu, orijinal metnin büyüklüğünden daha fazla yazmamam sürece çalışacaktır. Önce elimde 30 karakterin olduğunu söyle. Eğer 30'dan daha fazla yazıyorsam, 31 karakteri ekler, ama imleci 30'a geri yerleştirir. Karakter 32'yi pos.31'e yazabilirim, sonra 32. karakterini pos.32'de yazabilirim, ancak eğer 34 karakterini girmeye çalışırsam, karakteri ekler ve imleci tekrar 32 olarak ayarlar. Sorun, imleçPos aralığı içinde tanımlanmış olandan daha büyükse, yeni karakter vidaları ekleme işlevinin olmasıdır. Herhangi bir fikir?

Answer 1

Bu çapraz tarayıcıyı, bir metin yazımından çok tartışmalı bir div içinde yapmak daha kolaydır. Aşağıdakiler, tartışmalı div'inizin "yunan" kimliğine sahip olduğunu varsayar.

var greekChars = { 
    "a": "\u03b1" 
    // Add character mappings here 
}; 

function convertCharToGreek(charStr) { 
    return greekChars[charStr] || "[Greek]"; 
} 

function insertTextAtCursor(text) { 
    var sel, range, textNode; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 
      textNode = document.createTextNode(text); 
      range.insertNode(textNode); 

      // Move caret to the end of the newly inserted text node 
      range.setStart(textNode, textNode.length); 
      range.setEnd(textNode, textNode.length); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     range.pasteHTML(text); 
    } 
} 

var div = document.getElementById("greek"); 

div.onkeypress = function(evt) { 
    evt = evt || window.event; 
    var charCode = (typeof evt.which == "undefined") ? evt.keyCode : evt.which; 
    if (charCode) { 
     var charStr = String.fromCharCode(charCode); 
     var greek = convertCharToGreek(charStr); 
     insertTextAtCursor(greek); 
     return false; 
    } 
} 

Answer 2

Sanırım başlangıç ​​ofsetini başlangıç ​​ofsetinin ötesine getirebilirsiniz.

Metin eklerken başlangıç ​​ofsetinden önce ilk ofseti ayarlamalısınız.

rangeObj.setEnd(container, cursorPos); 
rangeObj.setStart(container,cursorPos);