之前也介绍过一个类似效果的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>
演示代码
打包打包下载
您可能感兴趣的文章:
- 基于JQuery实现鼠标点击文本框显示隐藏提示文本
- jQuery实现点击文本框弹出热门标签的提示效果
- jquery实现简单文字提示效果
- 易操作的jQuery表单提示插件
- jquery实现加载进度条提示效果
- jquery实现邮箱自动填充提示功能
- jquery 实现输入邮箱时自动补全下拉提示功能
- jquery实现美观的导航菜单鼠标提示特效代码
- jQuery简单实现input文本框内灰色提示文本效果的方法
