2012-05-12 56 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