javascript - div、文本区域、文本和光标检测

Question

我有以下问题:

1.) 我想使用可竞争的 div 或文本区域(最好是可内容编辑的 div，因为我还可以使用 html 标签，而不仅仅是文本)作为书写板。但是，我希望一旦光标到达 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();
        }
    }