1. 程式人生 > >textarea換行字數限制問題

textarea換行字數限制問題

1.在前臺頁面設計中,a標籤是很常見的一種,有的時候我們想要的一種結果是點選a標籤時,頁面仍然定位在原處,而不是返回頂端,造成使用者體驗度不好。解決方法為:<a href="#" onclick="functionname();return false;"> </a>。

2.對於<textarea>標籤,在firefox下大小是可以改變的,導致使用者體驗度不高;有時也會因為輸入的太長,導致標籤變形,頁面凌亂。解決方法為:

style="vertical-align:top;resize: none;word-wrap:break-word;"

vertical-align:top可以使的textarea標籤前面的文字位於框的頂端,而不是預設的底端;

resize: none防止在firefox下大小可以改變;

word-wrap:break-word按照字間自動換行。

當然,也可以強制進行按照位元組進行換行,在中文下應該沒有問題,英文下單詞會不會被分行,還沒有試過。方法為:str = str.replace(/(.{40})/g,'$1\n');

再一種解決辦法是,使用輸入字數限制,自己感覺比較好用的是maxlength,在IE/Firefox等瀏覽器下還沒有發現什麼bug,無論是複製、中文、連續輸入等操作,計算的還是比較準確的。呼叫方法為:

<head>裡面新增:

<script language="javascript" type="text/javascript" src="js/maxlength.js"></script>

<body>裡面:

<textarea name="textarea" data-maxsize="140" data-output="tips" wrap="virtual"  class="limited" cols="40" rows="4" style="resize: none;word-wrap:break-word;"></textarea>

<span>當前字數<span id="tips"></span>(限制140字)</span>

效果如下: