<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery动态计算文本框内的可输入字数</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/textSum.min.js"></script> <style type="text/css"> *{ box-sizing:border-box;} body{ background:#f4f4f4;} span{ font-size:12px;} p{ margin:5px 0;} .textWrap{ margin:10px 0 20px;} .textWrap input,.textWrap textarea{ display:inline-block; background:#fff; border-radius:4px; border:1px solid #ddd; height:34px; width:100%; padding:7px 12px; padding-right:80px; line-height:20px; font-size:14px; color:#333;} .textWrap textarea{ height:80px;} </style> </head> <body> <br> <div style="margin:50px auto; width:60%;"> <p><span>input maxlength = 10</span></p> <div class="textWrap wordSumTotal"> <input type="text" name="" maxlength="10"> </div> <p><span>input maxlength = 20</span></p> <div class="textWrap wordSumTotal"> <input type="text" name="" style="height:46px;" maxlength="20"> </div> <p><span>input maxlength 缺省时,默认maxlength = 10</span></p> <div class="textWrap wordSumTotal"> <input type="text" name=""> </div> <p><span>textarea maxlength = 20</span></p> <div class="textWrap wordSumTotal"> <textarea name="" cols="" rows="" maxlength="200"></textarea> </div> <br> <p>使用方法:</p> <p><pre><code>$('class or element').textSum();</code></pre></p> </div> <script type="text/javascript"> $(function(){ $('.wordSumTotal').textSum(); }); </script> </body> </html>
jQuery动态计算文本框内的可输入字数
猜你喜欢
转载自hudeyong926.iteye.com/blog/2396454
今日推荐
周排行