İçerik imleç elemanında metin imlecini özelleştirme

Yanıp sönen metin imlecini contenteditable="true"div etiketinde özelleştirmek mümkün müdür?İçerik imleç elemanında metin imlecini özelleştirme

İmleç konumuna getirme ve özel bir imleç ekleme gibi bir şey mi yoksa başka bir numara mı? Kendi imlecinizi (örneğin, Google Dokümanlarının yaptığı şey) çiziminiz yapılmaz.

kaynak

2011-12-06 Mostafa

Tim ile katılıyorum, ya da tavsiye etmem.

(Eğer Google'ın JavaScript ninjaları birine sahip olmadıkça size yardımcı olmak için: p) Ancak

, burada sadece size vermek .. bir <textarea> kullanılan bir custom caret ile örnek bir sayfası Bunu nasıl başarabileceğinizi düşünün.

Bu, bir custom caret'un en temel uygulaması olduğuna inanıyorum.

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript"> 

      var cursor, 
       $ = function (id){ 
        return document.getElementById(id); 
       }, 
       nl2br = function(txt){ 
        return txt.replace(/\n/g, "<br />"); 
       }, 
       writeit = function(from, e){ 
        e = e || window.event; 
        var w = $("writer"); 
        var tw = from.value; 
        w.innerHTML = nl2br(tw); 
       }, 
       moveIt = function (count, e){ 
        e = e || window.event; 
        var keycode = e.keyCode || e.which; 
        if(keycode == 37 && parseInt(cursor.style.left) >= (0-((count-1)*10))){ 
         cursor.style.left = parseInt(cursor.style.left) - 10 + "px"; 
        } else if(keycode == 39 && (parseInt(cursor.style.left) + 10) <= 0){ 
         cursor.style.left = parseInt(cursor.style.left) + 10 + "px"; 
        } 

       }; 

      window.onload = function(){ 
       cursor = $("cursor");    
       cursor.style.left = "0px"; 
      }; 

     </script> 

     <style type="text/css"> 
      body{margin: 0px;padding: 0px;height: 99%;} 
      textarea#setter{left: -1000px;position: absolute;} 
      .cursor{font-size: 12px;background-color: red;color: red;position: relative;opacity: 0.5;} 
      #terminal{margin: 8px;cursor: text;height: 500px;overflow: auto;} 
      #writer{font-family: cursor, courier;font-weight: bold;} 
      #getter{margin: 5px;} 
     </style> 
    </head> 
    <body> 
    <div id="terminal" onclick="$('setter').focus();"> 
     <textarea type="text" id="setter" onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea> 
     <div id="getter"> 
      <span id="writer"></span><b class="cursor" id="cursor">B</b> 
     </div> 
    </div> 
    </body> 
</html>

İyi şanslar .. Bir contenteditable bu uygulamaya Ve kesinlikle bu bir sonraki soruya olmayacak umut (: p)!

kaynak

2011-12-06 23:35:29 Pierre

Bunu yapmak doğru yapmak için büyük bir girişim ve bunu tavsiye etmem.

kaynak

2011-12-06 22:57:33

Tavsiye için teşekkürler. Bu yüzden şimdilik bunu önleyeceğim ve küçük yazma uygulamamla ilgili gerçekten ciddi olana kadar bunu uygulamaya çalışmam. – Mostafa

İçerik imleç elemanında metin imlecini özelleştirme

cevap

İlgili konular