Jquery實(shí)現(xiàn)仿新浪微博獲取文本框能輸入的字?jǐn)?shù)代碼
更新時(shí)間：2013年02月22日 16:05:00 作者：
Jquery實(shí)現(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);
});
}
頁面代碼：
<!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>
復(fù)制代碼 代碼如下:
//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 實(shí)現(xiàn)多層菜單效果的代碼
早上打開郵箱，一位朋友問我之前JQuery-Easyui 怎么做可以實(shí)現(xiàn)多級菜單2012-01-01
這篇文章主要介紹了jQuery使用$.ajax提交表單的方法,以完整實(shí)例形式分析了jQuery基于ajax數(shù)據(jù)提交的具體步驟與數(shù)據(jù)處理技巧,非常簡單實(shí)用,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2015-12-12
JQuery實(shí)現(xiàn)的彈出層，js和css可根據(jù)自己的實(shí)際情況而定，下面是具體的實(shí)現(xiàn)代碼，大家不妨參考下2014-05-05
JavaScript自動生成 年月范圍 選擇功能完整示例【基于jQuery插件】
這篇文章主要介紹了JavaScript自動生成 年月范圍 選擇功能,結(jié)合完整實(shí)例形式分析了基于jQuery插件的日期年月范圍自動生成與選擇功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-09-09
jquery實(shí)現(xiàn)動態(tài)改變css樣式的方法分析
這篇文章主要介紹了jquery實(shí)現(xiàn)動態(tài)改變css樣式的方法,結(jié)合實(shí)例形式分析了jQuery動態(tài)操作css樣式的設(shè)置、獲取及應(yīng)用等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
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時(shí)，發(fā)現(xiàn)如果頁面有其他z-index比較大的控件，datepicker就會被遮住而不能操作。2010-09-09
用JQUERY增刪元素的代碼，需要的朋友可以參考下2012-02-02
當(dāng)無法確定在某個字符串中是否確實(shí)存在一個字符的時(shí)候,就可調(diào)用 indexOf() 和 lastIndexOf() 方法2013-08-08
本篇文章主要介紹了認(rèn)識jQuery的Promise的具體使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10