前言

日常开发过程中,有些时候我们想使用textarea,然后限制输入的长度,在textarea末尾显示剩余可输入的字节数。

如下图:

 解决方法:

常用的有三种方法:

1、通过判断charCodeAt,区分字母与中文 ,然后计算字符串的长度。

2、通过使用charCodeAt 和 0xff00区分中文与英文,这个代码量稍微减少一些。

3、使用正则,把输入的中文,转成英文。1个中文等于两个英文,最后计算英文个数。

代码如下: 

方法一:

var obj = {};
obj.GetLength = function(str) {
// <summary>获得字符串实际长度,中文2,英文1</summary>
// <param name="str">要获得长度的字符串</param>
var realLength = 0, len = str.length, charCode = -1;
for (var i = 0; i < len; i++) {
charCode = str.charCodeAt(i);
if (charCode >= 0 && charCode <= 128)
realLength += 1;
else
realLength += 2;
}
return realLength;
}; alert(obj.GetLength('这是中文aaaaaaa'));

方法二(更简洁的方法):

var length = str.length; // str是输入的字符串
var blen = 0;
for (i=0; i<length; i++) {
if ((str.charCodeAt(i) & 0xff00) != 0) { // 如果是英文,返回0
blen ++;
}
blen ++;
}

方法三(更更简洁的方法):

var obj = {};
obj.GetLength = function(str) { // str是输入的字符串
return str.replace(/[\u0391-\uFFE5]/g,"aa").length; // 先把中文替换成两个字节的英文,再计算长度
};

alert(obj.GetLength('这是中文aaaaaa'));

TIP:

charCodeAt()方法的作用是:返回指定位置的字符的 Unicode 编码

js计算textarea输入文字的长度的更多相关文章

  1. textarea输入文字限制个数

    说明: w-count固定为数字部分的class textarea-active为超出最大输入文字个数报错信息的class html 部分: <div class="wrap wrap ...

  2. js控制textarea输入字符串的个数,鼠标按下抬起推断输入字符数

    [Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <te ...

  3. js 控制输入文字个数(换行不算)

    如题,换行符在textarea中是要当成一个字符的.用普通的maxlength属性就不行了,于是想到通过事件来控制输入文字的长度. 注意哦,回车换行不能算成字符.这样的话,普通的substring等方 ...

  4. 限制textarea输入内容长度(多浏览器兼容、鼠标操作可控)

    限制textarea的输入内容长度,当从键盘输入,内容长度达到最大值时,只有输入Backspace.Delete.左移动.右移动有效,当用鼠标粘贴内容,则只保留最大值长度的内容.从而控制textare ...

  5. inupt textarea提示文字(点击消失,不输入恢复)

    <input name="textfield" type="text"  maxlength="20" value="请输入 ...

  6. inupt textarea提示文字(点击消失,不输入恢复)及限制字数

    效果: input: textarea: 限100字 源码: input: <input name="textfield" type="text" max ...

  7. JS控制文本框textarea输入字数限制

    <html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...

  8. iOS webView与js交互在文本空格上输入文字

    项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...

  9. javascript限定输入textarea输入长度

    <textarea  id="content" onkeyup="limitLength(this.value,'512','content')"> ...

随机推荐

  1. 将java文件编译成class文件

    一般情况下,在myeclipse中保存java文件后会自动编译成class文件,但是这种情况只能编译当前工程的java文件,但是如果需要编译不是一个工程的java文件,比如在网上拷贝的java文件改如 ...

  2. 关于MVC与MVP的理解

    1. MVC的理解误区 理解误区: 1. 认为Model是指失血模型的实体类(Entity),是作为View和Controller之间的传输数据. 2. 把业务逻辑全部放在Controller端,认为 ...

  3. DevOps与Kubernetes 、容器的关系

    近两年,随着容器.Kubernetes 等技术的兴起,DevOps 这个概念被广泛提及并被大量使用. 本文将会从以下几个方面着手,结合实验展现的方式,让读者真正理解 DevOps 的含义. DevOp ...

  4. vue项目图标

    项目图标iconfont 网址:http://www.iconfont.cn

  5. 1.Lucene简介

    1.Lucene简介 Lucene是一个基于Java的全文信息检索工具包,它不是一个完整的搜索应用程序,而是为你的应用程序提供索引和搜索功能 Lucene是开源项目,它是可扩展,高性能的库用于索引和搜 ...

  6. zabbix 3.2.2 agent端(源码包)安装部署 (二)

    一.zabbix agent 端安装部署 1.创建zabbix用户和组 # groupadd zabbix # useradd -g zabbix zabbix -s /sbin/nologin 2. ...

  7. python基础编程: 函数示例、装饰器、模块、内置函数

    目录: 函数示例 装饰器 模块 内置函数 一.函数示例: 1.为什么使用函数之模块化程序设计: 不使用模块程序设计的缺点: 1.体系结构不清晰,可主读性差: 2.可扩展性差: 3.程序冗长: 2.定义 ...

  8. centos7安装BitCoin客户端

    一.安装依赖环境 [root@localhost src]# yum install autoconf automake libtool libdb-devel boost-devel libeven ...

  9. NLP/CL 顶会收录

    全文转载自知乎@刘知远老师:初学者如何查阅自然语言处理学术资料(2016修订版). 1. 国际学术组织.学术会议与学术论文 自然语言处理(natural language processing,NLP ...

  10. P2664 树上颜色统计 点分治 虚树 树上差分 树上莫队

    树上差分O(n)的做法 考虑每种颜色对每个点的贡献,如果对于每种颜色我们把当前颜色的点删除,那么原来的树就会分成几个子树,对于一个点,当前颜色在和他同子树的点的点对路径上是不会出现的.考虑到有多种颜色 ...