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 操作Word和Excel的实现代码
Oct 26 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
vue中的scope使用详解
Oct 29 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
JavaScript基于用户照片姓名生成海报
May 29 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中Redis的应用--消息传递
2017/03/28 PHP
JQuery扩展插件Validate—4设置错误提示的样式
2011/09/05 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
javascript编写简易计算器
2017/05/06 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
javascript获取元素的计算样式
2019/05/24 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
python 二维数组90度旋转的方法
2019/01/28 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
使用turtle绘制五角星、分形树
2019/10/06 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python 实现IP子网计算
2021/02/18 Python
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
黄河的主人教学反思
2014/02/07 职场文书
校园文明倡议书
2014/05/16 职场文书
募捐感谢信
2015/01/22 职场文书
明星邀请函
2015/02/02 职场文书
退货证明模板
2015/06/23 职场文书
如何用python插入独创性声明
2021/03/31 Python
css height属性中的calc方法详解
2021/06/03 HTML / CSS
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
前端JavaScript大管家 package.json
2021/11/02 Javascript
Python之matplotlib绘制饼图
2022/04/13 Python