幫TextArea加入長度限制的2種方法
1. 簡單的方式:
<textarea name="A" cols="45" rows="2" onKeyDown='if (this.value.length>=20){event.returnValue=false}'>aaaa</textarea>
簡單有效,但問題是輸入20個字後刪除鍵失效,直接貼入一段長文字也可以突破限制。
2. 粗暴的方式:
<script type="text/javascript">
function isMaxLen(o){
var nMaxLen=o.getAttribute? parseInt(o.getAttribute("maxlength")):"";
if(o.getAttribute && o.value.length> nMaxLen){
o.value=o.value.substring(0,nMaxLen)
}
}
</script>
<textarea maxlength="10" onkeyup="return isMaxLen(this)"></textarea>
這個方式使用者會很疑惑,我明明輸入了內容怎麼一移開TextArea就都沒了
3. 粗暴卻有點窩心
<textarea name="textarea" id="TextArea1" cols="45" rows="5" onkeyup="words_deal();" ></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="http://code.jquery.com/jquery-1.7.2.min.js"><\/script>');</script>
<script type="text/javascript">
function words_deal() {
var curLength = $("#TextArea1").val().length;
if (curLength > 5) {
var num = $("#TextArea1").val().substr(0, 5);
$("#TextArea1").val(num);
alert("超過字數限制,多出的字將被移除!");
} else {
$("#textCount").text(5 - $("#TextArea1").val().length);
}
}
</script>
這個例子中使用Jquery並增加提示,讓使用者知道發生了什麼事.
不知道還有沒有更好的方式呢??
-----------------------
Share is Power