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 轻松支持函数重载 (Part 2 - 实现)
Aug 04 Javascript
js左侧多级菜单动态的解决方案
Feb 01 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
js评分组件使用详解
Jun 06 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
php获取数据库结果集方法(推荐)
2017/06/01 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PHP生成随机字符串实例代码(字母+数字)
2019/09/11 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
利用python中集合的唯一性实现去重
2020/02/11 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
村优秀党员事迹材料
2014/01/15 职场文书
给校长的一封建议书
2014/03/12 职场文书
自动一体化专业求职信
2014/03/15 职场文书
认购协议书范本
2014/04/22 职场文书
实验室标语
2014/06/21 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
货款欠条范本
2015/07/03 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android