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 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
JavaScript初学者需要了解10个小技巧
Aug 25 Javascript
javascript getElementsByClassName实现代码
Oct 11 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
jquery实现手机号码选号的方法
Jul 31 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
javascript实现简单计算器效果【推荐】
Apr 19 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 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
smarty section简介与用法分析
2008/10/03 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
如何利用http协议发布博客园博文评论
2015/08/03 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
vue $router和$route的区别详解
2020/12/02 Vue.js
Python的time模块中的常用方法整理
2015/06/18 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
python实现QQ批量登录功能
2019/06/19 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
Spotahome意大利:公寓和房间出租
2020/02/21 全球购物
环保建议书500字
2014/05/14 职场文书
验房委托书
2014/08/30 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2014年司法局工作总结
2014/12/11 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers
详解Python内置模块Collections
2022/03/22 Python