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);
});
}
頁面代碼：
<!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中hover方法搭配css的hover選擇器,實現(xiàn)選中元素突出顯示方法
下面小編就為大家?guī)硪黄猨Query中hover方法搭配css的hover選擇器,實現(xiàn)選中元素突出顯示方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了JQuery顯示隱藏DIV的方法及代碼實例,本文講解了載入時隱藏、動態(tài)隱藏和顯示兩部分內(nèi)容,需要的朋友可以參考下2015-04-04
本文給大家分享的是一段基于Jquery實現(xiàn)表單驗證的代碼，非常簡單實用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
jQuery動畫效果實現(xiàn)圖片無縫連續(xù)滾動
這篇文章主要為大家介紹了jQuery動畫效果實現(xiàn)圖片無縫連續(xù)滾動，實現(xiàn)類似連續(xù)不間斷的滾動廣告位，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
本文為大家介紹下層自動緩慢展開收縮在瀏覽器打開時是如何實現(xiàn)的，主要用到了slideUp及slideDown等主要jquery方法，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
這篇文章主要介紹了jQuery中appendTo()方法用法,實例分析了appendTo()方法的功能、定義及把匹配的元素插入指定元素結(jié)尾的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery前端開發(fā)35個小技巧的相關(guān)資料，非常實用,需要的朋友可以參考下2016-05-05
jQuery 是一個非常優(yōu)秀的 JavaScript 框架，在現(xiàn)在的 Web 開發(fā)項目中扮演著重要角色。jQuery 使用簡單靈活，同時還有許多成熟的插件可供選擇，它可以幫助你在項目中加入一些非常好的效果，讓網(wǎng)站有更好的可用性和用戶體驗2011-10-10
2009年最受歡迎jQuery插件—AnythingSlider【滑動】2010-02-02
本篇文章主要是對Jquery getJSON方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12