2012-05-12 20 views
1

我有以下问题:的div,文本域,文本和光标检测

1)我想用一个contenditable股利或一个textarea(最好是一个CONTENTEDITABLE格,因为我也可以用有HTML标签,而不仅仅是文字),作为书写板。但是,一旦光标到达div/textarea的BOTTOM RIGHT角落,我希望写入STOP。这似乎很难实施。我使用max-height和overflow进行管理:hidden使元素(div/textarea)不能展开,但用户仍然可以键入,但它只是不可见的,不需要的。我想要的是当光标到达右下角然后继续,在新的空白“页面”上停止写入。

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

理想的是div,这样我就可以输入html标签(粗体,斜体等),并且显示内容的div可以具有不同的大小,具体取决于屏幕分辨率。 2.)给定一个表示从数据库中填充text/html的“页面”的div,如何显示只填充div的内容,以及当用户按下“下一页”按钮,显示下一个内容。这似乎对我来说是可以撤销的,通过javascript来计算可以填充多少内容。

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

没有闪光灯,没有java,没有插件。只:html,css,javascript

在此先感谢。

+0

我有一个想法,这可能会或可能无法正常工作。每次修改该框(onkeyup,可能),附加一个span标记,然后用jQuery计算它与父代的偏移量。将其与动态宽度和高度(也可以使用jQuery计算)进行比较,看它是否在最后。如果是这样,做任何事情。有些复杂,但可能只是工作,毕竟,没有人说这很容易:) –

回答

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(); 
     } 
    } 
+0

有一个计数字符的方法不同的问题: a)我将需要使用等宽字体 b)不是crossbrowser(需要检查浏览器供应商) c)只能使用文本内容,而不是HTML ,因此我想避免它,如果可能的话。 – MIrrorMirror