之前也介绍过一个类似效果的JQuery插件jQuery maxlength文本字数限制插件,不过这次的charcount部署更简单,而且有超出数字提示的功能.

简单的部署:

1.载入js:

复制代码 代码如下:

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/charCount.js"></script>

2.Html结构:

复制代码 代码如下:

<form id="form" method="post" action="">

<h2>Default Usage</h2>

<div>

<label for="message">Type your message</label>

<textarea id="message1" name="message1"></textarea>

</div>

<h2>Custom Usage</h2>

<div>

<label for="message">Another message (limited to 30, warning at 10)</label>

<textarea id="message2" name="message2"></textarea>

</div>

</form>

3.charCount插件设置:

复制代码 代码如下:

<script type="text/javascript">

$(document).ready(function(){

//default usage

$("#message1").charCount();

//custom usage

$("#message2").charCount({

allowed: 30,

warning: 10,

counterText: '剩余字数: '

});

});

</script>

演示代码

打包打包下载