[DOM元素处理] jQuery实现的计算textarea可输入剩余字数

最新推荐文章于 2022-04-07 15:02:44 发布

kiba_t_y2

最新推荐文章于 2022-04-07 15:02:44 发布

阅读量1.2k

点赞数 1

分类专栏： pick 文章标签：实例 jquery dom

pick 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Query实现的计算textarea可输入剩余字数:
textarea一般是用来输入文字性内容的，不过出于各种原因的考虑，文字的数量一般是受到限制的。
下面就通过实例代码介绍一下，如何实现此效果，代码如下:

[HTML] 纯文本查看复制代码运行代码

 
         <!DOCTYPE html> 
        
         < 
         html 
         > 
        
         < 
         head 
         > 
        
         < 
         meta 
         charset 
         = 
         "utf-8" 
         > 
        
         < 
         meta 
         name 
         = 
         "author" 
         content 
         = 
         "http://www.softwhy.com/" 
         /> 
        
         < 
         title 
         >蚂蚁部落</ 
         title 
         > 
        
         < 
         script 
         src 
         = 
         "http://libs.baidu.com/jquery/1.9.0/jquery.js" 
         ></ 
         script 
         > 
        
         < 
         script 
         type 
         = 
         "text/javascript" 
         > 
        
         var txtobj = { 
        
         divName: "area", //外层容器的class 
        
         textareaName: "chackTextarea", //textarea的class 
        
         numName: "num", //数字的class 
        
         num: 140 //数字的最大数目 
        
         } 
        
         var textareaFn = function () { 
        
         //定义变量 
        
         var $onthis; //指向当前 
        
         var $divname = txtobj.divName; //外层容器的class 
        
         var $textareaName = txtobj.textareaName; //textarea的class 
        
         var $numName = txtobj.numName; //数字的class 
        
         var $num = txtobj.num; //数字的最大数目 
        
         //判断是不是中文 
        
         function isChinese(str) {   
        
         var reCh = /[u00-uff]/; 
        
         return !reCh.test(str); 
        
         } 
        
         function numChange() { 
        
         //初始定义长度为0 
        
         var strlen = 0;  
        
         var txtval = $.trim($onthis.val()); 
        
         for (var i = 0; i <  
         txtval.length 
         ; i++) { 
        
         if(isChinese(txtval.charAt(i)) == true){ 
        
         //中文为2个字符 
        
         strlen 
         = strlen + 2;  
        
         } 
        
         else { 
        
         //英文一个字符 
        
         strlen 
         =strlen+1; 
        
         } 
        
         } 
        
         //中英文相加除2取整数 
        
         strlen 
         = 
         Math 
         .ceil(strlen / 2);  
        
         if($num - strlen < 0) { 
        
         //超出的样式 
        
         $par.html("超出 <b  
         style 
         = 
         'color:red;' 
         class 
         = 
         " + $numName + " 
         >" + Math.abs($num - strlen) + "</ 
         b 
         > 字");  
        
         } 
        
         else { 
        
         //正常时候 
        
         $par.html("还可以输入 < 
         b 
         class 
         = 
         " + $numName + " 
         >" + ($num - strlen) + "</ 
         b 
         > 字");  
        
         } 
        
         $b.html($num - strlen); 
        
         } 
        
         $("." + $textareaName).live("focus",function(){ 
        
         //获取当前的数字 
        
         $b = $(this).parents("." + $divname).find("." + $numName);  
        
         $par = $b.parent(); 
        
         //获取当前的textarea 
        
         $onthis = $(this);  
        
         var setNum = setInterval(numChange, 500); 
        
         }); 
        
         } 
        
         $(document).ready(function(){ 
        
         textareaFn(); 
        
         }) 
        
         </ 
         script 
         > 
        
         </ 
         head 
         > 
        
         < 
         body 
         > 
        
         < 
         div 
         class 
         = 
         "area" 
         > 
        
         < 
         p 
         >还可以输入< 
         b 
         class 
         = 
         "num" 
         >140</ 
         b 
         >字</ 
         p 
         > 
        
         < 
         textarea 
         class 
         = 
         "chackTextarea" 
         ></ 
         textarea 
         > 
        
         </ 
         div 
         > 
        
         </ 
         body 
         > 
        
         </ 
         html 
         >

以上代码实现了我们的要求，不但能够给出剩余的字数，还会提示超出的字数。

试过有效！

转载自：http://www.softwhy.com/forum.php?mod=viewthread&tid=10771

kiba_t_y2

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[DOM元素处理] jQuery实现的计算textarea可输入剩余字数

Query实现的计算textarea可输入剩余字数:textarea一般是用来输入文字性内容的，不过出于各种原因的考虑，文字的数量一般是受到限制的。下面就通过实例代码介绍一下，如何实现此效果，代码如下:[HTML] 纯文本查看复制代码运行代码010203040506070809
复制链接

扫一扫