jQuery动态计算文本框内的可输入字数

一款jQuery动态计算文本框内的可输入字数的特效代码，每个输入框或文本框都可以预设限制的字符数，限制字符数和当前字符数均在输入框或文本框的右侧显示出来，一旦超过了限制字符数，后门输入的所有内容均不显示在输入框或文本框里。

分类：表单代码 > 输入框难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需引入jQuery库和字数限制插件，并设置好页面元素的样式，代码如下：

<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;}

页面的body部分，div容器的多个p标签里分别放入不同的input输入框或textarea文本框，代码如下：

<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>