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 动态访问JSon元素示例代码
Aug 30 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
JavaScript实现自定义媒体播放器方法介绍
Jan 03 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
非常漂亮的js烟花效果
Mar 10 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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
深入密码加salt原理的分析
2013/06/06 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
javascript父、子页面交互技巧总结
2014/08/08 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
js 颜色选择插件
2017/01/23 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
解决python os.mkdir创建目录失败的问题
2018/10/16 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
Python 如何批量更新已安装的库
2020/05/26 Python
优秀演讲稿范文
2013/12/29 职场文书
环保公益策划方案
2014/08/15 职场文书
学前教育专业求职信
2014/09/02 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书
本溪关门山导游词
2015/02/09 职场文书
汽车修理厂管理制度
2015/08/05 职场文书