今兒個給表單的標簽加長度限制,一路 input="type" maxlength="**" 下來很順。這時殺出個textarea,來也給你加個maxlength。
不過textarea對我說:"哥我沒這屬性,您看給換個吧。。。" 沒辦法,(現在我使用的FireFox15.0.1、Chrome25.0.1364.160支持此屬性)既然沒這屬性那咱就換吧,用事件來控制。
網上查了下,用於監控文本域內容變可以用onchange、onpropertychange、oninput
分析:
onchange只有在失去焦點的時候才會觸發,而且如果是用js方法來操作文本域內的值時,我們所做的長度限制就失效了,這個不好。
onpropertychange在文本域的任何屬性改變時都會觸發,當然包括值的改變。用這個似乎可以,不過這個方法IE專用,在谷歌、火狐等瀏覽器無效。
oninput適用於谷歌、火狐等標准瀏覽器,不過有個問題是如果用js來操作文本域內的值時這個事件是不會觸發的。
綜上所述,我目前能做到的做佳的是這樣:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>文本域長度限制</title> 5 </head> 6 <body> 7 <textarea id="areaContent" maxlength="50" style="width: 400px; height: 200px;"></textarea> 8 </body> 9 </html> 10 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 11 <script type="text/javascript"> 12 $("#areaContent").bind("input propertychange", function (e) { 13 if ((("\v" == "v" && e.originalEvent.propertyName == "value") || "\v" != "v") && $(this).val().length > $(this).attr("maxlength")) //判斷是否為IE9以下瀏覽器並且是value屬性發生了改變 14 $(this).val($(this).val().substring(0, $(this).attr("maxlength"))); 15 }); 16 </script>
但是“oninput適用於谷歌、火狐等標准瀏覽器,不過有個問題是如果用js來操作文本域內的值時這個事件是不會觸發的”這個問題還是解決不了,還請路過的朋友留步指教。。。。
