编程 Javascript

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 相关文章推荐

javascript基础的动画教程，直观易懂

Jan 10 Javascript

用JS操作FRAME中的IFRAME及其内容的实现代码

Jul 26 Javascript

js监听表单value的修改同步问题，跨浏览器支持

Dec 31 Javascript

javascript获取隐藏dom的宽高具体实现

Jul 14 Javascript

jQuery通过写入cookie实现更换网页背景的方法

Apr 15 Javascript

ReactNative页面跳转实例代码

Sep 27 Javascript

jQuery中Nicescroll滚动条插件的用法

Nov 10 Javascript

jQuery实现复选框的全选和反选

Feb 02 Javascript

基于JavaScript实现滑动门效果

Mar 16 Javascript

vue+vue-validator 表单验证功能的实现代码

Nov 13 Javascript

详解swiper在vue中的应用(以3.0为例）

Sep 20 Javascript

js实现图片放大并跟随鼠标移动特效

Jan 18 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