思路:文本框中内容输入包括单字节字符(英文、数字等)和双字节字符(中文字符等),这就使得字符计数时需要考虑两种不同的情况来分别处理。还有就是对文本框事件监听处理,如keyup、keydown、onchange等,要根据需要选择要监听的事件,否则会发生紊乱。具体实现如下:
-----------------------------------------------------------------------------------------------------
/**
* 读取文本内容中包含的字节数,并做相应的控制处理
* params {String} textAreaId: 文本域对象标识
* params {String} surplusId: 显示剩余计数的区域标识
* params {Integer} maxLength: 最大限定字符数
* @author wangmeng
* @date 2011-08-01
*/
function calcSurplusWords(textAreaId, surplusId, maxLength) {
/**
* 读取文本内容中包含的字节数
* params {String} content: 文本内容
*/
var countByteLength = function(content) {
//字节数计数标量
var length = 0;
//非空字符串
if (content) {
for (var i = 0; i < content.length; i++) {
//累加
length ++;
//若是中文字符则再次累加
if (content.charCodeAt(i) > 255) {
length ++;
}
}
//返回计数标量值
return length;
} else {
return 0;
}
};
/**
* 预截取指定长度的字符串
* 若给定的字符串大于指定长度,截取指定长度返回,否者返回源字符串。
* params {String} preString: 预截取的字符串
* params {String} preSubLength: 预截取的长度
*/
var preSubstring = function(preString, preSubLength) {
//字节数计数标量
var byteLength = 0;
//构建新字符串对象
var newString = new String();
for (var i = 0; i < preString.length; i++) {
//获取当前索引处字符
var c = preString.charAt(i);
//累加字节计数标量值
byteLength ++;
//若是中文字符则再次累加
if (preString.charCodeAt(i) > 255) {
byteLength ++;
}
//为新字符串对象追加字符
newString = newString.concat(c);
//字节总数若大于预截取的长度截断之后的所有字符并将新字符串返回
if (byteLength >= preSubLength) {
newString = newString.concat('');
//得到最后一个字符编码
var lastChar = newString.charCodeAt(newString.length-1);
//是中文字符则舍弃
if(lastChar > 255){
return newString.substring(0, newString.length-1);
}
return newString;
}
}
//如果给定字符串小于指定长度,则返回源字符串
if (byteLength < preSubLength) {
return preString;
}
};
/**具体操作处理**/
//分别获取文本域对象和剩余计数区域对象
var textArea = this.fetchOriginalProto(textAreaId);
var surplus = this.fetchOriginalProto(surplusId);
//获取文本内容中的字节总数
var countLen = countByteLength(textArea.value);
//获取最大限定字节数和已录入的字节数之间的差量值
var dispersion = (maxLength * 2- countLen) / 2;
//若在限定范围内则差量值大于0
if (dispersion >= 0) {
//剩余字数显示区域数字显示差量值
surplus.innerText = parseInt(dispersion);
} else {
//超出限定范围则剩余计数置0
surplus.innerText = 0;
//截取限定范围内的字符串
textArea.value = preSubstring(textArea.value, maxLength * 2);
}
}
------------------------------------------------------------------------------------------------------
对了,需要注意的是,有时候用escape来取编码的时候,有些地方不能用,比如在用gzip压缩时会报错。
分享到:
相关推荐
jquery 实时统计textarea内的字符个数
VUE监控textarea输入的字符数量,实时显示可以输入多少个文字。
* 使用一个字符串分割另一个字符串 * * @param delimiter 边界上的分隔字符 * @param haystack 输入的字符串 * @param out 输出的字符串指针 * @return 分割成了多少个成员 */ int explode(char *delimiter, ...
react-textarea-counter 基本textarea字符计数器React组件。安装npm i react-textarea-counter --save基本用法import React from 'react' ;import TextareaCounter from 'react-textarea-counter' ;export default ...
js监听鼠标事件控制textarea输入字符串的个数.docx
js限制textarea每行输入字符串长度的代码.docx
NULL 博文链接:https://xiaojin21cen.iteye.com/blog/1560818
<textarea cols="每行中的字符数" rows="显示的行数"> 文本内容 </textarea> 描述 <textarea> 标记定义多行的文本输入控件。有两个比较重要的属性cols和rows, 语法格式 说明 属性 值 描述 cols number 规定文本区内...
css textarea textarea 样式
textarea显示限制输入字符
textarea还剩余字数统计,支持复制粘贴的时候统计字数
主要介绍了JS简单限制textarea内输入字符数量的方法,涉及JavaScript响应鼠标及键盘事件处理textarea输入框字符的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
因为业务需求 今天做了一个textarea文本域字符串长度限制的方法,其实网上已经有了很多相关的解决方案,但在输入日语时,在IE存在BUG,我的这个版本就是针对这种情况的
计算 textarea 中键入的字符数,并显示在达到最大允许字符数之前还剩多少个字符。 ###如何使用: < script > jQuery ( document ) . ready ( function ( $ ) { $ ( '#comment' ) . countChars ( { ...
textArea内每行设定显示字符数量
textarea 随内容高度固定,自动增宽;宽度固定,自动增高; 以及 wrap 的几种属性简介。
本篇文章主要是对textarea 控制输入字符字节数的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
Textarea Fullscreen是一个jquery插件大小只有5K,可以将textarea设置为全屏模式,
js实现textArea滚动条样式,兼容多种浏览器