SBox Lessons

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