1

次の問題があります。

1.) コンテンディタブル div またはテキストエリア ( text だけでなく html タグも使用できるので contenteditable div が望ましい) を手書きパッドとして使用したい。ただし、カーソルがdiv/textareaのBOTTOM RIGHTコーナーに到達したら、書き込みを停止したいと思います。これを実装するのは難しいようです。max-height と overflow:hidden を使用して、要素 ( div / textarea ) が展開されないように管理しましたが、ユーザーは入力できますが、表示されず、望ましくないものになります。私が望むのは、カーソルが右下隅に到達したときに書き込みを停止し、新しい空の「ページ」で続行することです。

私の最初のアイデアは、いくつかの等幅フォントを使用して、許可される最大文字数を計算することでしたが、問題は、すべてのブラウザが同じフォントの同じ数の等幅文字を行ごとに表示するわけではなく、div のサイズが一定ではなく可変である可能性があることです。 .

理想は div で、html タグ (ボールド、イタリックなど) を入力できます。コンテンツを表示する div は、画面の解像度に応じて異なるサイズにすることができます。

2.) データベースからのテキスト/html で埋められる「ページ」を表す div が与えられた場合、div を満たすコンテンツのみを表示するにはどうすればよいですか? ユーザーが「次のページ」ボタンを押すと、次のコンテンツ。これは私には元に戻せないように思えます.javascriptを介して、divにどれだけのコンテンツを埋めることができるかを把握しています.

これら 2 つの相関する問題に関するアイデアは大歓迎です。

フラッシュなし、Java なし、プラグインなし。のみ: html、css、javascript

前もって感謝します。

4

1 に答える 1

0

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

<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();
        }
    }
于 2012-05-12T18:01:55.790 に答える