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 相关文章推荐
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
js Date概念详细介绍
Nov 22 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
JavaScript中ES6字符串扩展方法
Aug 26 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
JS实现图片幻灯片效果代码实例
May 21 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.ini 中文版
2006/10/28 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
python实现清屏的方法
2015/04/30 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
python使用Matplotlib画饼图
2018/09/25 Python
python爬虫实现获取下一页代码
2020/03/13 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
Django多个app urls配置代码实例
2020/11/26 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
小学生爱国演讲稿
2014/04/25 职场文书
销售团队口号大全
2014/06/06 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书