jQuery插件:实现类twitter的文本字数限制效果

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

看看DEMO

简单的部署:

1.载入js:
<script type=”text/javascript” src=”http://www.iinterest.net/demo/js/jquery.js”></script>
<script type=”text/javascript” src=”http://www.iinterest.net/demo/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>

搞定:)

This entry was posted in Javascript, jQuery. Bookmark the permalink.

发表评论

您的电子邮箱不会被公开。 标记为 * 的区域必须填写

*

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>