jQuery计算textarea中文字数(剩余个数)的小程序


Posted in Javascript onNovember 28, 2013
<div class="area">
        <p>
            还可以输入<b class="num">140</b>字</p>
        <textarea class="chackTextarea"></textarea>
    </div> 
<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() {
            var strlen = 0; //初始定义长度为0
            var txtval = $.trim($onthis.val());
            for (var i = 0; i < txtval.length; i++) {
                if (isChinese(txtval.charAt(i)) == true) {
                    strlen = strlen + 2; //中文为2个字符
                } else {
                    strlen = strlen + 1; //英文一个字符
                }
            }
            strlen = Math.ceil(strlen / 2); //中英文相加除2取整数
            if ($num - strlen < 0) {
                $par.html("超出 <b style='color:red;font-weight:lighter' 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();
            $onthis = $(this); //获取当前的textarea
            var setNum = setInterval(numChange, 500);
        });
    }
    textareaFn();
</script>
Javascript 相关文章推荐
jQuery代码优化之基本事件
Nov 01 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
JavaScript实现轮播图特效
Apr 10 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
javascript打印html内容功能的方法示例
Nov 28 #Javascript
javascript列表框操作函数集合汇总
Nov 28 #Javascript
JavaScript调用客户端的可执行文件(示例代码)
Nov 28 #Javascript
js实现单行文本向上滚动效果实例代码
Nov 28 #Javascript
javascript获取元素CSS样式代码示例
Nov 28 #Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 #Javascript
JavaScript中的连字符详解
Nov 28 #Javascript
You might like
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
prototype class详解
2006/09/07 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
Vue实现购物车基本功能
2020/11/08 Javascript
用pickle存储Python的原生对象方法
2017/04/28 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
房地产财务部员工岗位职责
2014/03/12 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
护士2015年终工作总结
2015/04/29 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python