jQuery擴(kuò)展實(shí)現(xiàn)text提示還能輸入多少字節(jié)的方法
本文實(shí)例講述了jQuery擴(kuò)展實(shí)現(xiàn)text提示還能輸入多少字節(jié)的方法。分享給大家供大家參考,具體如下:
1.添加jQuery自定義擴(kuò)展
$(function($){ // tipWrap: 提示消息的容器 // maxNumber: 最大輸入字符 $.fn.artTxtCount = function(tipWrap, maxNumber){ var countClass = 'js_txtCount', // 定義內(nèi)部容器的CSS類名 fullClass = 'js_txtFull', // 定義超出字符的CSS類名 disabledClass = 'disabled'; // 定義不可用提交按鈕CSS類名 // 統(tǒng)計(jì)字?jǐn)?shù) var count = function(){ var val = lenFor($.trim($(this).val())); if (val <= maxNumber){ tipWrap.html('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57\u8282</span>'); }else{ tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">\u5DF2\u7ECF\u8D85\u51FA <strong>' + (val - maxNumber) + '</strong> \u4E2A\u5B57\u8282</span>'); }; }; $(this).bind('keyup change', count); return this; }; });
獲取字節(jié)數(shù)函數(shù)
var lenFor = function(str){ var byteLen=0,len=str.length; if(str){ for(var i=0; i<len; i++){ if(str.charCodeAt(i)>255){ byteLen += 3; } else{ byteLen++; } } return byteLen; } else{ return 0; } }
2.實(shí)例化
<script type="text/javascript"> // demo $(function($){ // 批量 $('.autoTxtCount').each(function(){ $(this).find('.text1').artTxtCount($(this).find('.tips'), 108); }); }); </script>
3.相應(yīng)的html結(jié)構(gòu)
<div class="form-group"> <div class="col-sm-9"> <label class="col-sm-1 control-label" for="form-field-1"> 內(nèi)容: </label> </div> </div> <div style="padding-left:100px;" id="autoTxtCount" class="autoTxtCount form-group"> <div > <textarea class="text1" name="content" cols="50" rows="3"><!--{$aData.content}--></textarea> </div> <div> <span class="tips"></span> </div> </div>
4.一些樣式
#autoTxtCount { width:500px; } #autoTxtCount .help, #autoTxtCount .help a { color:#999; } #autoTxtCount .tips { color:#999; padding:0 5px; } #autoTxtCount .tips strong { color:#1E9300; } #autoTxtCount .tips .js_txtFull strong { color:#F00; } #autoTxtCount textarea.text1 { width:474px; }
效果如下:
更多關(guān)于jQuery相關(guān)內(nèi)容可查看本站專題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery字符串操作技巧總結(jié)》、《jQuery操作xml技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery+ajax+text文本框?qū)崿F(xiàn)智能提示完整實(shí)例
- ASP.NET jQuery 實(shí)例1(在TextBox里面創(chuàng)建一個(gè)默認(rèn)提示)
- 基于jQuery的彈出警告對(duì)話框美化插件(警告,確認(rèn)和提示)
- 基于jquery的氣泡提示效果
- Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動(dòng)補(bǔ)全下拉提示功能
- jquery實(shí)現(xiàn)表單輸入時(shí)提示文字滑動(dòng)向上效果
- jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
- jQuery實(shí)現(xiàn)手機(jī)號(hào)碼輸入提示功能實(shí)例
- jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
- jquery限制輸入字?jǐn)?shù),并提示剩余字?jǐn)?shù)實(shí)現(xiàn)代碼
- 基于jQuery的input輸入框下拉提示層(自動(dòng)郵箱后綴名)
相關(guān)文章
jQuery實(shí)現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)花式輪播之圣誕節(jié)禮物傳送效果,需要的朋友可以參考下2016-12-12jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作
這篇文章主要介紹了jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08網(wǎng)頁下載文件期間如何防止用戶對(duì)網(wǎng)頁進(jìn)行其他操作
網(wǎng)頁下載文件時(shí)需要一段時(shí)間,在這期間如何防止用戶對(duì)網(wǎng)頁進(jìn)行其他操作,將div覆蓋在網(wǎng)頁上,將網(wǎng)頁鎖住,具體實(shí)現(xiàn)如下2014-06-06jQuery支持動(dòng)態(tài)參數(shù)將函數(shù)綁定到事件上的方法
這篇文章主要介紹了jQuery支持動(dòng)態(tài)參數(shù)將函數(shù)綁定到事件上的方法,實(shí)例分析了兩種支持動(dòng)態(tài)參數(shù)的函數(shù)綁定技巧,需要的朋友可以參考下2015-03-03jQuery對(duì)話框插件ArtDialog在雙擊遮罩層時(shí)出現(xiàn)關(guān)閉現(xiàn)象的解決方法
這篇文章主要介紹了jQuery對(duì)話框插件ArtDialog在雙擊遮罩層時(shí)出現(xiàn)關(guān)閉現(xiàn)象的解決方法,涉及針對(duì)插件源碼的修改,需要的朋友可以參考下2016-08-08基于jquery的選擇標(biāo)簽至文本域效果,可多選/可過濾重復(fù)/可限制個(gè)數(shù)的實(shí)現(xiàn)代碼
選擇標(biāo)簽至表單域插件, 基于jQuery, 可多選/可過濾重復(fù)/可限制個(gè)數(shù). 是以前的項(xiàng)目中用到過的一個(gè)項(xiàng)目, 當(dāng)初是用原生js東拼西湊的, 用jQuery重寫了下,已封裝成插件.2010-11-11jquery zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例分享
這篇文章主要為大家詳細(xì)介紹了jquery zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例,感興趣的小伙伴們可以參考一下2016-03-03