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 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 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对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
js获取TreeView控件选中节点的Text和Value值的方法
2012/11/24 Javascript
常用DOM整理
2015/06/16 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
JS实现联想、自动补齐国家或地区名称的功能
2020/07/07 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python类型强制转换long to int的代码
2013/02/10 Python
python编码最佳实践之总结
2016/02/14 Python
Python中字典和集合学习小结
2017/07/07 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Flask-WTF表单的使用方法
2019/07/12 Python
如何基于线程池提升request模块效率
2020/04/18 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
支持IE8的纯css3开发的响应式设计动画菜单教程
2014/11/05 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
数据库专业英语
2012/11/30 面试题
CAD制图设计师自荐信
2014/01/29 职场文书
小学生家长评语大全
2014/02/10 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
中药学自荐信
2014/06/15 职场文书
开网店计划分析
2019/07/30 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL