Jquery實現(xiàn)仿新浪微博獲取文本框能輸入的字?jǐn)?shù)代碼

更新時間：2013年02月22日 16:05:00 作者：

Jquery實現(xiàn)仿新浪微博獲取文本框所能輸入的字?jǐn)?shù)，感興趣的朋友可以研究一下代碼方便你折騰，希望本文提供的方法可以幫助到你

limit.js代碼

 
//txt:文本框jquery對象 
//limit:限制的字?jǐn)?shù) 
//isbyte:true:視limit為字節(jié)數(shù)；false:視limit為字符數(shù) 
//cb：回調(diào)函數(shù)，參數(shù)為可輸入的字?jǐn)?shù) 
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); 
}); 
} 

頁面代碼：

復(fù)制代碼代碼如下:

 
<!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("已經(jīng)超過"+(-c)+"個字"); 
} 
}); 

InitLimit($("#txt1"),10,true,function(c){ 
if(c>=0){ 
$("#show1").val("還能輸入"+c+"個字"); 
}else{ 
$("#show1").val("已經(jīng)超過"+(-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> 

您可能感興趣的文章:

相關(guān)文章

jQuery-Easyui 1.2 實現(xiàn)多層菜單效果的代碼
早上打開郵箱，一位朋友問我之前JQuery-Easyui 怎么做可以實現(xiàn)多級菜單
2012-01-01
jQuery使用$.ajax提交表單完整實例
這篇文章主要介紹了jQuery使用$.ajax提交表單的方法,以完整實例形式分析了jQuery基于ajax數(shù)據(jù)提交的具體步驟與數(shù)據(jù)處理技巧,非常簡單實用,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下
2015-12-12
JQuery彈出層示例可自定義
JQuery實現(xiàn)的彈出層，js和css可根據(jù)自己的實際情況而定，下面是具體的實現(xiàn)代碼，大家不妨參考下
2014-05-05
JavaScript自動生成年月范圍選擇功能完整示例【基于jQuery插件】
這篇文章主要介紹了JavaScript自動生成年月范圍選擇功能,結(jié)合完整實例形式分析了基于jQuery插件的日期年月范圍自動生成與選擇功能相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-09-09
jquery實現(xiàn)動態(tài)改變css樣式的方法分析
這篇文章主要介紹了jquery實現(xiàn)動態(tài)改變css樣式的方法,結(jié)合實例形式分析了jQuery動態(tài)操作css樣式的設(shè)置、獲取及應(yīng)用等相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
jQuery插件Tmpl的簡單使用方法
JavaScript 也可以利用模版來解決這些問題，比如基于 jQuery 的 jquery.tmpl，現(xiàn)在已經(jīng)被接受為官方的模版插件了。詳細(xì)的 API 在 jQuery 的 Templates 里，內(nèi)置的 demo 也盡情地演示了各種用法。
2015-04-04
JQuery UI DatePicker中z-index默認(rèn)為1的解決辦法
用到JQuery UI的DatePicker時，發(fā)現(xiàn)如果頁面有其他z-index比較大的控件，datepicker就會被遮住而不能操作。
2010-09-09
用JQUERY增刪元素的代碼
用JQUERY增刪元素的代碼，需要的朋友可以參考下
2012-02-02
jquery indexOf使用方法
當(dāng)無法確定在某個字符串中是否確實存在一個字符的時候,就可調(diào)用 indexOf() 和 lastIndexOf() 方法
2013-08-08
認(rèn)識jQuery的Promise的具體使用方法
本篇文章主要介紹了認(rèn)識jQuery的Promise的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10