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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
js Dialog 实践分享
Oct 22 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 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
用文本文件制作留言板提示(下)
2006/10/09 PHP
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
phalcon框架使用指南
2016/02/23 PHP
JS event使用方法详解
2008/04/28 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
详解python做UI界面的方法
2019/02/27 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript