jQuery 类twitter的文本字数限制带提示效果插件

177 阅读 0 评论 117 点赞

我是靠谱客的博主老迟到大山，最近开发中收集的这篇文章主要介绍jQuery 类twitter的文本字数限制带提示效果插件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

之前也介绍过一个类似效果的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> 

演示代码
打包打包下载