divタグ、テキストエリア、テキストカーソル検出

Question

私は次のような問題があります。

1.）私はだけではなく、私もそこにhtmlタグを使用することができますので、contenditable div要素またはテキストエリア（できれのcontentEditableのdivを使用したいですテキスト）を書くことができます。しかし、カーソルがdiv/textareaのBOTTOM RIGHT隅に達すると、書込みを停止したい。これは実装が難しいようです。私はmax-heightとoverflowを使って管理しています：要素（div/textarea）を展開しないように非表示にしましたが、ユーザーはまだ入力することができますが、それは見えなくなります。私が望むのは、カーソルが右下隅に達した後、新しい空の "ページ"に移動すると書込みが停止することです。

私の最初のアイデアはモノスペースフォントを使用して最大文字数を計算することでしたが、問題は、すべてのブラウザが同じフォント、ライン単位で同じ数の固定幅文字を表示するわけではなく、サイズ、定数ではありません。

理想的なのは、HTMLのタグ（太字、斜体など）を入力できるdivと、画面の解像度に応じてコンテンツのサイズが異なることを示すdivです。

2）データベースからtext/htmlでいっぱいになる「ページ」を表すdivがある場合、divを塗りつぶす内容のみを表示するにはどうすればいいのでしょうか？ユーザーが「次のページ」を押すと、ボタンを押し、次のコンテンツを表示します。これは私には元に戻すことができる、javascriptを介してどのくらいのコンテンツdivに記入することができます。

これら2つの相関の問題上の任意のアイデアを大幅に

ノーフラッシュなしのjava、ないプラグインを高く評価しないであろう。 only：html、css、javascript

ありがとうございます。

Answer 1

次のコードを試すことができます。

<div id="editable_div"></div>

var content_id = document.getElementById("editable_div"); 

    max = 10; 

    //binding keyup/down events on the contenteditable div 
    $('#'+content_id).keyup(function(e){ check_charcount(content_id, max, e); }); 
    $('#'+content_id).keydown(function(e){ check_charcount(content_id, max, e); }); 

    function check_charcount(content_id, max, e) 
    { 
     if(e.which != 8 && $('#'+content_id).text().length > max) 
     { 
      // $('#'+content_id).text($('#'+content_id).text().substring(0, max)); 
      e.preventDefault(); 
     } 
    }