jQuery maxlength文本字数限制插件


Posted in Javascript onApril 16, 2010

jQuery maxlength文本字数限制插件
实现这个效果有很多方法,这里就介绍一种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"

Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
input输入框鼠标焦点提示信息
Mar 17 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 #Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 #Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 #Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 #Javascript
jQuery 打造动态下滑菜单实现说明
Apr 15 #Javascript
xheditor与validate插件冲突的解决方案
Apr 15 #Javascript
js 获取Listbox选择的值的代码
Apr 15 #Javascript
You might like
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[03:48]DOTA2完美大师赛主赛事第二日精彩集锦
2017/11/24 DOTA
python制作小说爬虫实录
2017/08/14 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
Python求凸包及多边形面积教程
2020/04/12 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
前端实现打印图像功能
2019/08/27 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
董事长岗位职责
2013/11/30 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
求职推荐信范文
2015/03/27 职场文书
千与千寻观后感
2015/06/04 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python