コンテンツ編集可能なdivでカーソルの行と列を取得

ユーザーがコンテンツ編集可能なdivにテキストを入力するときにカーソル位置を見つけるためのレシピはいくつかありますが、それらのいずれかを動作させることはできません。実際、私は最も簡単なコードから最も驚くべき結果を得ています。このスニペットでテキストを追加してからバックスペースを使用して削除すると、開始オフセットが実際にインクリメントされます。（私はその分割要素や何かを想像することができ、オフセットには印刷可能でないタグなどが含まれています）コンテンツ編集可能な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にテキストを入力するまで位置表示が更新されませんが、位置表示が再び正しく表示されます。バックスペースがキーアップイベントを引き起こしていない、または他の何かが紛失しているという問題はありますか？ – Griffin

ああ、私は理解していると思います、私は答えを投稿しました。 – Griffin

-1

divの代わりにテキストボックスを使用することを検討しましたか？

<textbox>edit my content</textbox>

あなたは

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

かにonKeyDownへれるonkeypressを変更する際に、コンテンツ

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

出典

2012-04-01 10:42:53 codelove

あなたはその質問を読んだことがありますか？ – Griffin

質問を理解するために+1 – codelove

を追加する（innerHTMLプロパティとその内容を取得し、更新することができdiv要素を使用する必要がある場合バックスペースがキャプチャされるように）バックスペースが入力されると、位置表示が1回増分することがわかります。

私はスティックの間違った終わりを持っているが、私は一つの解は、次のことをやっていると考えているなら、私を許してください：

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

Enterキーを押すとどうなりますか？ – Will

ゼロから再びカウントを開始します。あなたのコードにカーソルがある行を表示するものは何もありません。 – Griffin

しかしそれはより大きな質問です！ "どのように行と列を知ることができ、そのようなコンテンツ編集可能なdiv内の任意の行のテキストを取得できますか？"これはリッチテキストエディタのようなものなので、ユーザーがキーを押すたびに、その行がどの行にあるのか、行の内容が何であるのかを知りたいと思います。 – Will

コンテンツ編集可能なdivでカーソルの行と列を取得

答えて

関連する問題