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 对小数加法精度处理示例说明
Dec 27 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
浅谈JavaScript的push(),pop(),concat()方法
Jun 03 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
使用vue构建移动应用实战代码
Aug 02 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
解决layui轮播图有数据不显示的情况
Sep 16 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
js实现简单选项卡制作
Aug 05 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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加速的eAccelerator dll支持文件打包下载
2007/09/30 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
php实现的二分查找算法示例
2017/06/20 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
ThinkPHP3.2.3框架邮件发送功能图文实例详解
2019/04/23 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
js实现的Easy Tabs选项卡用法实例
2015/09/06 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
Javascript复制实例详解
2016/01/28 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
2018/01/26 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python3大文件解压和基本操作
2017/12/15 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python生成任意频率正弦波方式
2020/02/25 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Pycharm安装python库的方法
2020/11/24 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
德国内衣、泳装和睡衣网上商店:Bigsize Dessous
2018/07/09 全球购物
项目转让协议书
2014/10/27 职场文书
二年级作文之动物作文
2019/11/13 职场文书