在內容可編輯div中獲取遊標行和列

當用戶在可編輯內容的div中鍵入文本時，有幾個用於查找遊標位置的配方，但是我無法讓它們中的任何一個可用。事實上，我從最簡單的代碼中得到最令人驚訝的結果;如果在下面的代碼片段中添加一些文本，然後退格刪除它，那麼您的startoffset實際上會增加！（我可以想象它的拆分元素或偏移包括不可打印的標籤或東西）在內容可編輯div中獲取遊標行和列

我有一個div，將有一個固定的字體，但我打算添加語法突出顯示（它不是什麼codemirror可以只是做;它的互動性更強的提示與編輯腳本中的任何地方，如果那樣的品牌意識，爲什麼我想要得到自己的位置）

<html> 
<head> 
<script type="text/javascript"> 
<!-- 
var ta = null; 

function onKeypress(event) { 
    var range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeypress = onKeypress; 
} 
//--> 
</script> 
<body onload="init();"> 
<noscript> 
Sorry, you need javascript. Not much to see here otherwise; move along. 
</noscript> 
<p id="msg"></p><hr/> 
<div id="ta" contenteditable="true" style="width:100%; height:100%; font-family: courier;"> 
</div> 
</body> 
</html>

我怎麼能知道行和列，並獲得文本。對於任何行，在這樣一個內容可編輯的div？

來源

2012-03-31 Will

我不知道你說的是你的代碼錯誤。當我在Chrome中測試您的示例代碼時，代碼似乎工作 - 當我退格時，位置顯示不會更新，直到我開始在div中輸入更多文本，但位置顯示再次正確。是否退格不會觸發keyup事件或其他我缺少的東西？ – Griffin 2012-04-01 15:17:11

啊，我想我明白了，我發佈了一個答案。 – Griffin 2012-04-01 15:29:49

-1

你有沒有考慮過使用文本框而不是divs？

<textbox>edit my content</textbox>

如果你必須使用一個div你可以用innerHTML屬性

alert(document.getElementById('theIdOfMyDiv').innerHTML);

或添加內容

var currentContent = document.getElementById('theIdOfMyDiv').innerHTML; 
currentContent = currentContent + 'add some content';

來源

2012-04-01 10:42:53 codelove

你甚至讀過這個問題嗎？ – Griffin 2012-04-01 15:11:16

+1瞭解問題 – codelove 2012-04-01 20:55:15

獲取和更新其內容在改變onkeypress事件到的onkeydown（所以backspace被捕獲）我看到，當退格輸入時，位置顯示會增加一次。

原諒我，如果我有棍子的錯誤結束，但我相信一個解決方案是執行以下操作：

var ta = null; 
var range = null; 

function onKeyDown(event) { 
    if(event.which != 8 && event.which != 46) { 
     range = window.getSelection().getRangeAt(0); 
     document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
    } 
} 

function onKeyUp(event) { 
    range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeydown = onKeyDown; 
    ta.onkeyup = onKeyUp; 
}

來源

2012-04-01 15:29:26 Griffin

如果按下回車鍵會發生什麼情況？ – Will 2012-04-02 06:11:52

它從零開始重新計數。代碼中沒有任何內容顯示光標所在的行。 – Griffin 2012-04-02 10:33:11

但這是更大的問題！「我怎麼能知道行和列，並獲得任何行的文本，在這樣一個內容可編輯的div？」。由於這就像一個富文本編輯器，每次用戶按下一個鍵時，我都想知道他們在哪條線上，線內容是什麼。 – Will 2012-04-02 11:11:31

在內容可編輯div中獲取遊標行和列

回答

相關問題