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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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代码(星期六,星期日总和)
2009/11/12 PHP
解析php中的escape函数
2013/06/29 PHP
Yii2单元测试用法示例
2016/11/12 PHP
jQuery入门知识简介
2010/03/04 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
Angular 4中如何显示内容的CSS样式示例代码
2017/11/06 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
Python深入学习之对象的属性
2014/08/31 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
python远程连接MySQL数据库
2019/04/19 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
python3 re返回形式总结
2020/11/20 Python
比利时香水网上商店:NOTINO
2018/03/28 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
大学生专科学习生活的自我评价
2013/12/07 职场文书
四年级学生评语大全
2014/04/21 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
公务员政审个人总结
2015/02/12 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
react中的DOM操作实现
2021/06/30 Javascript
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技