在contentEditable div中設置光標位置 - 跨瀏覽器

我在設置contentEditable div中的光標位置時遇到問題並尋求一些幫助。在contentEditable div中設置光標位置 - 跨瀏覽器

我已經看了幾個SO和其他在線解決方案沒有成功，其中包括： jquery Setting cursor position in contenteditable div，並 Set cursor position on contentEditable <div>和許多其他在線資源。

基本上，我們使用的Telerik Editor將contentAreaMode設置爲DIV，強制它使用contentEditable div而不是iFrame。當用戶點擊編輯器時，我們希望能夠將光標移動到點擊位置，以便用戶可以在編輯器中隨意輸入/編輯內容。使用下面的示例代碼，我可以將FF，Chrome和IE9中的光標位置設置爲內部div之後。但是，在IE8（屬於else if（document.selection）塊）中，我無法讓光標位置在div之後移動，因此任何輸入的文本都會在div之前或之內結束 - 從未之後。我會非常感謝任何幫助。

其他信息：需要此工作在IE8標準文檔模式 - 不在怪癖模式（它工作）。

更新：這是問題的一個的jsfiddle一起玩：http://jsfiddle.net/kidmeke/NcAjm/7/

<html> 
    <head> 
     <style type="text/css"> 
      #divContent 
      { 
       border: solid 2px green; 
       height: 1000px; 
       width: 1000px; 
      } 
     </style> 

     <script type="text/javascript"> 
     $(document).ready(function() 
     { 
      $("#divContent").bind('click', function() 
      { 
       GetCursorPosition(); 
      }); 
      $("#divContent").bind('keydown', function() 
      { 
       GetCursorPosition(); 
      }); 
     }); 

     function GetCursorPosition() 
     { 
      if (window.getSelection) 
      { 
       var selObj = window.getSelection(); 
       var selRange = selObj.getRangeAt(0); 
       cursorPos = findNode(selObj.anchorNode.parentNode.childNodes, selObj.anchorNode) + selObj.anchorOffset; 
       $('#htmlRadEdit_contentDiv').focus(); 
       selObj.addRange(selRange); 
      } 
      else if (document.selection) 
      { 
       var range = document.selection.createRange(); 
       var bookmark = range.getBookmark(); 
       // FIXME the following works wrong when the document is longer than 65535 chars 
       cursorPos = bookmark.charCodeAt(2) - 11; // Undocumented function [3] 
       $('#htmlRadEdit_contentDiv').focus(); 
       range.moveStart('textedit'); 
      } 
     } 
     function findNode(list, node) 
     { 
      for (var i = 0; i < list.length; i++) 
      { 
       if (list[i] == node) 
       { 
        return i; 
       } 
      } 
      return -1; 
     } 
     </script> 

    </head> 
    <body> 
     <div id="divContent" contentEditable="true"> 
      <br> 
      <div style="background-color:orange; width: 50%;"> 
       testing! 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-03-28 user415127

使用瘦長（披露：我是作者）在windowload事件在IE 7和8爲我工作。嘗試在用戶點擊可編輯元素時移動插入符號是一個糟糕的主意：它與默認瀏覽器行爲相沖突，因此可能無法正常工作，並且不會執行用戶期望的操作（即將插入符號放在點擊位置或附近）。

<html> 
    <head> 
     <style type="text/css"> 
      #divContent 
      { 
       width: 1000px; 
       height: 1000px; 
       border: solid 2px green; 
       padding: 5px 
      } 
     </style> 
     <script src="http://rangy.googlecode.com/svn/trunk/currentrelease/rangy-core.js"></script> 

     <script type="text/javascript"> 
      window.onload = function() { 
       rangy.init(); 
       var el = document.getElementById("divContent"); 
       el.focus(); 
       var range = rangy.createRange(); 
       range.setStartAfter(el.getElementsByTagName("div")[0]); 
       range.collapse(true); 
       rangy.getSelection().setSingleRange(range); 
      }; 

     </script> 

    </head> 
    <body> 
     <div id="divContent" contentEditable="true"> 
      <br> 
      <div style="background-color:orange; width: 50%;"> 
       testing! 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-03-28 16:13:45

嗨，感謝您的回覆 - 現在就試試代碼示例。你提到嘗試移動插入符號是一個壞主意 - 但它不會放置在用戶默認點擊的位置......必須執行某些操作。我錯過了什麼嗎？所見即所得編輯器通常如何處理這樣的任務？ – user415127 2012-03-28 17:29:39

這對我不起作用......我無法設置光標位置PAST內部div - 它總是在div內部結束。我應該提到 - 我需要它在IE8文檔模式下工作 - 它只能在QUIRKS模式下工作... – user415127 2012-03-28 17:43:19

@ user415127：好的。我懷疑這可能是不可能的。是否可以使用鼠標而不是編程將光標放在所需的位置？ – 2012-03-30 23:49:45

在contentEditable div中設置光標位置 - 跨瀏覽器

回答

相關問題