Jquery实现仿新浪微博获取文本框能输入的字数代码


Posted in Javascript onFebruary 22, 2013

limit.js代码

//txt:文本框jquery对象 
//limit:限制的字数 
//isbyte:true:视limit为字节数;false:视limit为字符数 
//cb:回调函数,参数为可输入的字数 
function InitLimit(txt,limit,isbyte,cb){ 
txt.keyup(function(){ 
var str=txt.val(); 
var charLen; 
var byteLen=0; 
if(isbyte){//原文博客:blog.csdn.net/bluceyoung 
for(var i=0;i<str.length;i++){ 
if(str.charCodeAt(i)>255){ 
byteLen+=2; 
}else{ 
byteLen++; 
} 
} 
charLen = Math.floor((limit-byteLen)/2); 
}else{ 
byteLen=str.length; 
charLen=limit-byteLen; 
} 
cb(charLen); 
}); 
}

页面代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"> 
</script> 
<script type="text/javascript" src="limit.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
InitLimit($("#txt"),10,true,function(c){ 
if(c>=0){ 
$("#show").val("还能输入"+c+"个字"); 
}else{ 
$("#show").val("已经超过"+(-c)+"个字"); 
} 
}); 
InitLimit($("#txt1"),10,true,function(c){ 
if(c>=0){ 
$("#show1").val("还能输入"+c+"个字"); 
}else{ 
$("#show1").val("已经超过"+(-c)+"个字"); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<input type="text" id="txt"/><input id="show" type="text"/><br/> 
<input type="text" id="txt1"/><input id="show1" type="text"/> 
</body> 
</html>

Jquery实现仿新浪微博获取文本框能输入的字数代码
Javascript 相关文章推荐
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
JavaScript数组函数unshift、shift、pop、push使用实例
Aug 27 Javascript
JavaScript面对国际化编程时的一些建议
Jun 24 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
js实现京东轮播图效果
Jun 30 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
IE的fireEvent方法概述及应用
Feb 22 #Javascript
js取得url地址参数实例
Feb 22 #Javascript
js模拟滚动条(横向竖向)
Feb 22 #Javascript
js时间日期和毫秒的相互转换
Feb 22 #Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 #Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 #Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 #Javascript
You might like
php 远程关机操作的代码
2008/12/05 PHP
php中在PDO中使用事务(Transaction)
2011/05/14 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php中的动态调用实例分析
2015/01/07 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
Centos7.7 64位利用本地完整安装包安装lnmp/lamp套件教程
2021/03/09 Servers
Jquery 的扩展方法总结
2011/10/01 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Django数据模型中on_delete使用详解
2020/11/30 Python
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
先进个人获奖感言
2014/01/24 职场文书
中学生家长评语大全
2014/04/16 职场文书
法制宣传标语集锦
2014/06/25 职场文书
运动会5000米加油稿
2015/07/21 职场文书
安全生产奖惩制度
2015/08/06 职场文书
《所见》教学反思
2016/02/23 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书