コンテンツ編集可能な要素のテキストカーソルをカスタマイズする

contenteditable="true"divタグで点滅するテキストカーソルをカスタマイズすることはできますか？コンテンツ編集可能な要素のテキストカーソルをカスタマイズする

カーソルの位置を取得してカスタムカーソルを置くようなもの、または他のトリックですか？

2011-12-06 Mostafa

私はTimに同意しますが、私はそれをお勧めしません。

（あなたはあなたを助けるためにGoogleのJavaScriptの忍者の1持っていない限り：p）を

しかし、ここで<textarea>で使用custom caretのサンプル・ページが..ですちょうどあなたを与えるためにどのようにこれを達成できるかのアイデア。

これは、custom caretの最も基本的な実装です。

<!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>

幸運.. contenteditableでこれを実装すると、私は確かにこれはあなたの次の質問ではないことを願っています（：p）を！

出典

2011-12-06 23:35:29 Pierre

自分のカーソルを描くことなく（たとえば、Google Docsのようなものです）。これを行うことは、権利を得るための主要な事業であり、私はそれをお勧めしません。

出典

2011-12-06 22:57:33

アドバイスありがとうございます。だから私はこれを今のところ避けて、私が自分の小さな書き込みアプリについて真剣になるまでこれを実装しようとはしません。 – Mostafa

コンテンツ編集可能な要素のテキストカーソルをカスタマイズする

答えて

関連する問題