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 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
vue 实现购物车总价计算
Nov 06 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 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 分页原理分析,大家可以看看
2009/12/21 PHP
PHP入门学习笔记之一
2010/10/12 PHP
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
小小聊天室Python代码实现
2016/08/17 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
Python Merge函数原理及用法解析
2020/09/16 Python
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
高级运动鞋:GREATS
2019/07/19 全球购物
利用指针变量实现队列的入队操作
2012/04/07 面试题
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
社会学专业求职信
2014/02/24 职场文书
义务教育学校标准化建设汇报材料
2014/08/16 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
单位考核鉴定意见
2015/06/05 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
导游词之张家口
2019/12/13 职场文书