开发者社区> 科技小能手> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery插件InputLimitor实现文本框输入限制字数统计

简介:
+关注继续查看

点我查看InputLimitor在线演示

使用说明
需要使用jQuery库文件和InputLimitor库文件
http://jquery.com/
http://plugins.jquery.com/project/inputlimitor

同时可自定义显示提示框的CSS样式

使用实例
一,包含文件部分

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="jquery.inputlimitor.1.0.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery.inputlimitor.1.0.css" /> 
二,HTML部分

<textarea rows="3" cols="30" name="textarea" class="limited"></textarea> 
三,javascript部分

$('.limited').inputlimitor(); 
如上实例是最简单的一种使用形式,如果要提示当前字符输入数和总数,可使用如下方法:

$('input[name=text1]').inputlimitor({ 
limit: 50, 
remText: '%n caractere%s restantes', 
limitText: 'Campo limitado a %n caractere%s.' 
}); 
limit表示字符输入的限制数,remText表示输入字符提示文本,其中%n表示当前剩余字符数,%s表示输入的限制数。

另外类似textlimit插件提示效果使用实例
1,HTML部分

<input type="text" name="text3" id="text3" size="30" /> 
<span id="limitingtext" style="color: #999;">Field limited to 30 characters.</span> 
2,Javascript部分

$('input[name=text3]').inputlimitor({ 
limit: 30, 
boxId: 'limitingtext', 
boxAttach: false 
}); 
boxId表示提示信息显示的ID

InputLimitor插件与textlimit插件使用基本上差不多,都非常简单,InputLimitor插件功能更为强大,值得推荐!

 

点我下载InputLimitor
http://jquerycodes.googlecode.com/files/jquery-inputlimitor.1.0.zip


本文转自linzheng 51CTO博客,原文链接:http://blog.51cto.com/linzheng/1081604


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery限制文本框只能输入金额
1 $("#batch_diff_percent").keyup(function () { 2 var reg = $(this).val().match(/\d+\.?\d{0,2}/); 3 var txt = ''; 4 if (reg != null) { 5 txt = reg[0]; 6 } 7 $
951 0
JQuery点击复制文本框内容的方法插件
[导读] 文章介绍了两种常用的点击复制文本框内容方法,一种是but IE only,同样的这个也是我们经常使用的。优点是体积小,仅有十来行代码,但缺点也很明显,只支持IE及以IE为内核的浏览器,另一种插件+FLASH控件的方法 文章介绍了两种常用的点击复制文本框内容方法,一种是but IE only,同样的这个也是我们经常使用的。优点是体积小,仅有十来行代码,但缺点也很明
995 0
对jquery val 获取input 文本框值进行扩展
因项目需要,直接 以$(文本框name名称).value() 形式获取 或者 设置 其值,原jquery 自带不是很能满足需要,现在 进行扩展插件 fox.风来了 ;(function($,window,document,undefined){ $.fn.value = function(options) { var _select
987 0
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
0 0
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载