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操作入门实例
Apr 16 Javascript
javascript时间函数基础介绍
Mar 28 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jquery ui dialog实现弹窗特效的思路及代码
Aug 03 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
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
Laravel5.1 框架路由基础详解
2020/01/04 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
javascript折半查找详解
2015/01/26 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python函数的作用域及关键字详解
2019/08/20 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
python实现飞机大战项目
2020/03/11 Python
Python定义函数实现累计求和操作
2020/05/03 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
水务局局长岗位职责
2013/11/28 职场文书
教师的实习鉴定
2013/12/15 职场文书
五年级数学教学反思
2014/02/11 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android
Windows10安装Apache2.4的方法步骤
2022/06/25 Servers