div、textareas、文本和光标检测

Question

我有以下问题：

1.) 我想使用可竞争的 div 或 textarea（最好是 contenteditable div，因为我也可以在那里使用 html 标签，而不仅仅是 text ）作为书写板。但是，一旦光标到达 div/textarea 的右下角，我希望停止写入。这似乎很难实现。我已经使用 max-height 和 overflow:hidden 进行了管理，以使元素（ div / textarea ）不扩展，但是用户仍然可以键入，它只是不可见的，不需要的东西。我想要的是当光标到达右下角时停止写作，然后在一个新的空白“页面”上继续。

我的第一个想法是使用一些等宽字体并计算允许的最大字符数，但问题是第一个并不是所有浏览器都显示相同数量的相同字体的等宽字符，每行和第二个 div 的大小可以是可变的, 不是常数。

理想的情况是 div，这样我就可以输入 html 标签（粗体、斜体等），并且显示内容的 div 可以是不同的大小，具体取决于屏幕分辨率。

2.) 给定一个表示“页面”的 div，该页面填充了数据库中的文本/html，我如何仅显示填充 div 的内容以及当用户按下“下一页”按钮时，显示下一个内容。这对我来说似乎是不可撤销的，通过 javascript 弄清楚有多少内容可以填充到 div 中。

任何关于这两个相关问题的想法将不胜感激

没有flash，没有java，没有插件。仅限：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();
        }
    }