在contenteditable元素中自定義文本光標

是否可以在contenteditable="true"div標籤中自定義閃爍文本光標？在contenteditable元素中自定義文本光標

就像獲取光標位置並在其上放置自定義光標或任何其他技巧？

2011-12-06 Mostafa

我同意Tim，我也不會推薦它。

（除非你有谷歌的JavaScript忍者人幫你：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

在contenteditable元素中自定義文本光標

回答

相關問題