js计算textarea输入文字的长度
前言
日常开发过程中,有些时候我们想使用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输入文字的长度的更多相关文章
- textarea输入文字限制个数
说明: w-count固定为数字部分的class textarea-active为超出最大输入文字个数报错信息的class html 部分: <div class="wrap wrap ...
- js控制textarea输入字符串的个数,鼠标按下抬起推断输入字符数
[Html代码] <table> <tr> <td width="150">短信内容:</td> <td> <te ...
- js 控制输入文字个数(换行不算)
如题,换行符在textarea中是要当成一个字符的.用普通的maxlength属性就不行了,于是想到通过事件来控制输入文字的长度. 注意哦,回车换行不能算成字符.这样的话,普通的substring等方 ...
- 限制textarea输入内容长度(多浏览器兼容、鼠标操作可控)
限制textarea的输入内容长度,当从键盘输入,内容长度达到最大值时,只有输入Backspace.Delete.左移动.右移动有效,当用鼠标粘贴内容,则只保留最大值长度的内容.从而控制textare ...
- inupt textarea提示文字(点击消失,不输入恢复)
<input name="textfield" type="text" maxlength="20" value="请输入 ...
- inupt textarea提示文字(点击消失,不输入恢复)及限制字数
效果: input: textarea: 限100字 源码: input: <input name="textfield" type="text" max ...
- JS控制文本框textarea输入字数限制
<html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...
- iOS webView与js交互在文本空格上输入文字
项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...
- javascript限定输入textarea输入长度
<textarea id="content" onkeyup="limitLength(this.value,'512','content')"> ...
随机推荐
- ZROI2018暑期集训B班训练赛#1解题报告
版权原因不公布题目信息 A 分析 虽然前一天搞到比较晚,考场上还是比较快的想到了正解,可惜姿势水平低被卡到了64(进入高中不知道考过多少次64了...) 这题有个比较明显且\(naive\)的做法是用 ...
- Java虚拟机-------垃圾回收机机制
概述 jvm中的堆图 在了解 垃圾回收器 之前,首先得了解一下垃圾回收器的几个名词. 1. 吞吐量CPU 用于运行用户代码的时间与 CPU 总消耗时间的比值.比如说虚拟机总运行了 100 分钟,用户代 ...
- docker之常见错误
1. docker run -d --name showdoc -p 4999:80 -v /showdoc_data/html:/var/www/html/ star7th/showdoc WARN ...
- vue进阶:vue-router之导航守卫、路由元信息、路由懒加载
1.导航被触发 2.在失活的组件里调用离开守卫:beforeRouteLeave —— 组件内守卫(离开组件). 3.调用全局的beforeEach守卫 —— 全局守卫(进入组件). 4.在重用组件里 ...
- 分布式缓存Redis+Memcached经典面试题和答案
Redis相比memcached有哪些优势? (1) memcached所有的值均是简单的字符串,redis作为其替代者,支持更为丰富的数据类型 (2) redis的速度比memcached快很多 ( ...
- ubuntu16.04 安装go
1.sudo add-apt-repository ppa:gophers/go 2.apt-get update 3.apt-get install golang 完成
- source命令用法:
命令格式 source FileName 作用 在当前bash环境下读取并执行FileName中的命令. 注意 该命令通常用命令"."来替代.如:source .bash_rc 与 ...
- python函数:叠加装饰器、迭代器、自定义迭代器、生成式
一.叠加多个装饰器二.迭代器三.自定义迭代器四.xxx生成式 一.叠加多个装饰器 # 加载装饰器就是将原函数名偷梁换柱成了装饰器最内层那个wrapper函数 # 在加载完毕后,调用原函数其实就是在调用 ...
- CentOS 安装 elasticsearch 注意点
注意点: 1. 从官网下载以 rpm 结尾的软件包 7.3.1版本 下载地址: https://artifacts.elastic.co/downloads/elasticsearch/elastic ...
- Android基础相关面试问题-binder面试问题详解
Linux内核的基础知识: 进程隔离/虚拟地址空间:在操作系统中为了保护某个进程互不干扰就设计了一个叫“进程隔离”的技术,防止进程A可以操作进程B的数据.而进程隔离技术用到了虚拟地址空间,进程A的虚拟 ...