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 13 Javascript
javascript中this的四种用法
May 11 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 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 has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
深入理解jQuery事件绑定
2016/06/02 Javascript
jQuery插件扩展extend的简单实现原理
2016/06/24 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python列表list保留顺序去重的实例
2018/12/14 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
会计电算化专业应届大学生求职信
2013/10/22 职场文书
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
大课间活动制度
2014/01/18 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
年终总结会主持词
2014/03/25 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
小学见习报告
2014/10/31 职场文书
中秋节寄语2015
2015/03/24 职场文书
校长新学期致辞
2015/07/30 职场文书
退伍军人感言
2015/08/01 职场文书
tree shaking对打包体积优化及作用
2022/07/07 Java/Android