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 页面载入进度条实现代码
Feb 08 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
Javascript中字符串replace方法的第二个参数探究
Dec 05 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
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语法(1)
2006/10/09 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
很实用的js选项卡切换效果
2016/08/12 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python出现segfault错误解决方法
2016/04/16 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
浅谈dataframe中更改列属性的方法
2018/07/10 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
《大自然的语言》教学反思
2014/04/08 职场文书
给市场的环保建议书
2014/05/14 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
同学联谊会邀请函
2019/06/24 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
nginx优化的六点方法
2021/03/31 Servers