jquery实时监控textarea文本框中的字符（中文汉字及标点、英文字母及标点、数字）长度

来源：互联网发布：怎么才能在淘宝上卖东西编辑：程序博客网时间：2024/06/07 06:33

jquery实时监控textarea文本框中的字符（中文汉字及标点、英文字母及标点、数字）长度

第一篇博文，献丑了。。

功能简介

textarea文本框有maxlength属性可以用来限制输入字符数，但是不区分中英文、数字、标点符号，将上述一视同仁为：每个字符都占一个单位。而数据库中对不同的字符，是给出不同大小空间的。如varchar2(64)能存储32个中文汉字或者64个英文字母。
本功能旨在实现中英文及标点、数字混合输入的情况下，在前端进行控制。

另外要说明的是，本文中的代码一部分参考了论坛的前辈，加以了修改。因为看到太多类似的，不确定谁是原创，所以不贴链接了，希望原创者看到后留言。

直接上代码

jsp代码textarea和button部分：

<html>...略<textarea id="title" name="title" class="form-control" rows="2"  placeholder="必填">${r_info['title'] }</textarea><span id="titleSpan" style="color:#999999"><em> * 最多可输入128个英文字符</em></span><textarea id="content" name="content" class="form-control" rows="10" placeholder="非必填">${r_info['content'] }</textarea><span id="contentSpan" style="color:#999999"><em> * 最多可输入500个英文字符</em></span><button type="submit" class="btn btn-blue" id="btnSubmit">确 定</button>...</html>

jquery代码1：
判断某个字符是中文、英文、标点或数字

function isChinese(str) {  //判断是不是中文汉字、中文标点    var reCh = /[u4e00-u9fa5]/;    //常用中文标点符号 。 ？ ！ ， 、 ； ： “ ” ‘ ' （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥    var reChP = /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/;    return !reCh.test(str) || reChP.test(str);}function isEnglish(str){//判断是不是英文字母、英文标点、数字    var reEn = /[a-zA-Z0-9]/;    //常用英文标点符号 , . ? [ ] ; ' : " ! $ ^ ( )     var reEnP = /[\u002c|\u002e|\u003f|\u005b|\u005d|\u003b|\u0026|\u0023|\u0033|\u0039|\u003b|\u003a|\u0026|\u0071|\u0075|\u006f|\u0074|\u003b|\u0021|\u0024|\u005e|\u0028|\u0029]/;    return reEn.test(str) || reEnP.test(str);}

jquery代码2：
根据textarea的id解析输入的文本，统计其所占英文字符数，这里约定一个中文汉字或中文标点占2个英文字符；一个英文字母或英文标点或数字占1个英文字符；不再范畴内的未知符号一律视为2个英文字符

function textAreaChangeFn(id2){    //alert($('#'+id).val());    var id = id2;    var maxContent;    if(id == "title"){        maxContent = 128;    }else if(id == "content"){        maxContent = 500;    }    var strlen = 0; //初始定义长度为0    var txtval = $('#'+id).val();    for (var i = 0; i < txtval.length; i++) {        if(isEnglish(txtval.charAt(i)) == true){//英文字母、英文标点、数字            strlen = strlen + 1;        }else if(isChinese(txtval.charAt(i)) == true){//中文汉字、标点            strlen = strlen + 2;        } else {//其他字符            strlen = strlen + 2;         }    }    var leftSize = maxContent - strlen;    if(leftSize<0){        $('#'+id+'Span').css("color","red");        $('#'+id+'Span').text("* 已输入"+strlen+"个英文字符，超出最长"+maxContent+"个字符的限制");        //超出字符限制，提交按钮失效        $('#btnSubmit').attr("disabled",true);    }else{        $('#'+id+'Span').css("color","#999999");        $('#'+id+'Span').text("* 已输入"+strlen+"个英文字符，还能输入"+leftSize+"个英文字符");        $('#btnSubmit').attr("disabled",false);    }}

jquery代码3：
textarea绑定事件，此处不在绑定事件中直接进行解析，而是调用了方法。这样做的目的是为了支持某些特殊情况。比如博主发现用脚本给textarea赋值是不能触发此绑定事件的：$(‘#title’).text(“XXX”); 对于这种情况，可以在赋值之后，可以在赋值之后将id作为参数，调用textAreaChangeFn()方法。

$('textarea').bind('input propertychange', function() {    textAreaChangeFn($(this).attr("id"));});

效果图：

这里写图片描述

哦，对了，unicode转换工具在这里：

站长工具：http://tool.chinaz.com/Tools/unicode.aspx

最后：

谢谢大家！

阅读全文

0 0