jQuery maxlength文本字数限制插件
更新时间：2010年04月16日 17:56:28 作者：
相信大家对twitter类的微博客都不陌生,作为一句话博客其字数即时提示效果设计的非常人性化.
实现这个效果有很多方法,这里就介绍一种jQuery插件maxlength,它的使用非常简单,让我们先看看演示:
jquery maxlength演示地址
演示代码打包下载
看看Demo中的重点代码:
1.载入maxlength.js
<script type="text/javascript" src="maxlength.js"></script>
2.加入函数,Demo中有3个例子,你可以根据实际需要选择不同的函数,不过最后一个例子对于中文而言是无效的.
复制代码 代码如下:
$(function () {
$('textarea.limited').maxlength({
'feedback' : '.charsLeft', 'useInput' : true
});
$('input.limited').maxlength({
'feedback' : '.charsLeft'
});
$('textarea.wordLimited').maxlength({
'words': true,
'feedback': '.wordsLeft', 'useInput' : true
});
});
3.调用
复制代码 代码如下:
<form action="">
<p>可以输入 <span class="charsLeft">20</span> 个字符</p>
<textarea class="limited"></textarea>
<input type="hidden" name="maxlength" value="20" />
</form>
<form action="">
<p>可以输入 <span class="charsLeft">10</span> 个字符</p>
<input maxlength="10" class="limited" />
</form>
一些必要的解释:
'useInput' : true 因为textarea需要借助input来实现,所以当你使用textarea的时候就需要这个参数
'feedback' : '.charsLeft' 是指即时显示的字数放入 class="charsLeft " 的容器中
input中设置最大数值直接用 maxlength="10"
textarea中的大数值需要设置与其对应input的value数值 value="20"
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了Jquery实现ready和bind事件的相关资料，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要为大家详细介绍了jQuery实现图片高亮显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
Django中使用jquery的ajax进行数据交互的实例代码
这篇文章主要介绍了Django中使用jquery的ajax进行数据交互的相关知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下2017-10-10
jquery插件star-rating.js实现星级评分特效
Bootstrap Star Rating是一个简单而强大的jQuery插件实现星级分数评级。支持像分数星填充和RTL输入先进的功能。在利用纯CSS-3造型使控制重点开发。该插件使用引导标记和造型默认情况下，但它可以覆盖与其他任何CSS的标记。2015-04-04
这篇文章主要介绍了实例讲解JQuery中this和$(this)的区别,this表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法,$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值,需要的朋友可以参考下2014-12-12
jQuery 3.0在日前发布了最终的全新版本。这篇文章主要介绍了jQuery 3.0十大新特性最终版发布的相关资料,需要的朋友可以参考下2016-07-07
在实际应用中，文本框中有时候只能够允许输入整数，但是有时候可能更为"博爱"一点，可以允许输入浮点数，下面就通过实例代码介绍一下如何利用jquery实现此功能2016-01-01
拖拽效果个人觉得是一种不错的用户体验，抽空研究了一下，原理还蛮简单的，具体实现如下，感兴趣的朋友可以参考下哈2013-06-06
jquery 获取select数组与name数组长度的实现代码
下面小编就为大家带来一篇jquery 获取select数组与name数组长度的实现代码。小编觉得挺不错的， 现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了jQuery实现ichat在线客服插件,需要的朋友可以参考下2014-12-12
最新评论