$tex.addClass("textColor") }else{ $tex.removeClass("textColor") } } }) }) 一、功能:
用戶邊輸入計算同時進行,告訴用戶還剩余多少可輸入的字數;
當超過規定的字數后,點擊確定,會讓輸入框閃動
二、功能分析
重點是用什么事件?
標準瀏覽器用oninput,而IE則使用onpropertychange ,這兩個事件的發生條件,是文本框的值發生改變。
字數的計算。
一個中文算兩個,一個符號或數字,英文,算一個。(如果是規定140個字,乘以2,那么就是280個)。需要用到Math.ceil方法,因為最后還是要除以2來還原顯示給用戶的字數;
閃動背景色
這里用到了模運算,因為是重復的動作,第一次有顏色,第二次沒有顏色,這樣重復的動作,就有閃動效果.
因為肉眼要看到這二次有顏色和無顏色的效果,所以需要用到延時,setTimeout和setInterval. 這里用到的是setInterval,因為要重復動作。
下面一段代碼給大家介紹用jQuery實現限制輸入字數的文本框。
1.導入外部.js文件:
<script src="http://static.l99.com/js/jquery/jquery-1.2.6.pack.js" type="text/javascript"></script>
2.在<body>標簽中加入如下代碼:
<body>還可以輸入<span id="word">140</span>個字<br /><textarea id="txt" name="" cols="" rows=""></textarea><script language="javascript" type="text/javascript">$("#txt").keyup(function(){ if($("#txt").val().length > 140){$("#txt").val( $("#txt").val().substring(0,140) );}$("#word").text( 140 - $("#txt").val().length ) ;});</script></body> 3.如果頁面加載時輸入框中有默認文本,那么要在頁面加載時運行如下jQuery代碼,方能正確顯示:
$("#word").text( 140 - $("#txt").val().length ) ; 新聞熱點
疑難解答