思路:文本框中内容输入包括单字节字符(英文、数字等)和双字节字符(中文字符等),这就使得字符计数时需要考虑两种不同的情况来分别处理。还有就是对文本框事件监听处理,如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压缩时会报错。
分享到:
相关推荐
react-textarea-counter 基本textarea字符计数器React组件。安装npm i react-textarea-counter --save基本用法import React from 'react' ;import TextareaCounter from 'react-textarea-counter' ;export default ...
我们将在事件处理函数中计算textarea中的字符数,并更新一个显示字符计数的元素: ```javascript $(document).ready(function() { var maxLength = 100; // 设置最大输入字符数 var counterElement = $('#...
在某些应用场景中,我们可能希望`textarea`具有自动下拉的功能,同时还能实时显示字符计数,以便用户了解输入内容是否超过预设限制。标题和描述中的"js textarea自动下拉(带计数)"就是指这种功能。 以下是一个简单...
在开发Web应用时,有时我们需要实现一种功能,即在用户...在实际项目中,你可以根据需求扩展这个功能,比如增加字符计数、格式检查或其他高级功能。通过Vue.js的强大功能和HTML的灵活性,你可以轻松地实现这些功能。
通过`addEventListener`方法添加了一个事件监听器,每当textarea内容改变时,都会更新字数计数并显示在页面上。 如果要限制最大字数,可以在事件处理函数中加入条件判断,当达到预设的最大值时,阻止进一步的输入...
一种优化方式是在用户停止输入一段时间(如300毫秒)后再更新字符计数,这可以通过使用debounce或throttle技术来实现。 总的来说,JavaScript实现Textarea字数统计是一个基本但实用的功能,它可以极大地提升用户在...
1. **JavaScript函数**:`textCounter`是实现字符计数的核心函数,它接受三个参数:当前的`Textarea`对象(field),显示剩余字符数的输入框对象(countfield)以及最大允许的字符数(maxlimit)。 2. **事件监听**...
在这个函数中,不仅会重新获取textarea的值并更新字符计数,也会检查当前的字符数量,然后更新发布按钮的状态。 5. CSS样式应用 在文件的描述中,还提到了对显示字符数目的样式设置。通过给一个元素(#numtjem)...
// 更新字符计数显示 } }); }); ``` 这段代码首先定义了最大允许的字符数`maxChars`,然后使用`$(document).ready`确保在DOM加载完成后执行绑定事件。`on('input'...`监听textarea的输入事件,每当用户输入或...
最后,如果整个文本值有更改,那么会更新`<textarea>`的值,同时调用`checkstr`函数来检查整个字符串长度是否超标,并且在必要时进一步截断字符串。 接下来,我们定义了`showOverWords`函数,它用于显示用户在`...
这个插件的核心功能是监控文本输入框(input[type="text"]或textarea)中的字符变化,一旦用户开始输入,就会启动计数机制。它通过JavaScript事件监听器(如`keyup`、`keydown`或`input`事件)来实现这一功能,每当...
在这个例子中,我们设置了textarea的最大字符数为140,当字符数达到10个时显示警告,计数器的文本显示为“还剩: __剩余字符数__”。插件会自动监控textarea的变化,实时更新计数,并根据需要显示警告。 charCount...
此外,对于多语言环境的应用程序,还需要考虑国际化和本地化的影响,确保字符计数的准确性。 在实际的Web开发中,可以通过多种方法限制`<textarea>`的字符数,这些方法包括纯JavaScript代码,以及可能涉及到的其他...
当用户在textarea中键入字符时,这个事件会被触发。我们可以读取textarea的`value`属性获取当前文本,然后计算出字符数,并与设定的最大字数进行比较。如果超过了限制,可以显示警告信息或者阻止进一步的输入。 ...
同时,为了适应不同的语言环境,还可以加入国际化支持,使字符计数提示更加友好。 在压缩包中的"可输入剩余字符"文件可能包含了一个完整的示例项目,包括HTML结构、CSS样式和JavaScript代码,供开发者参考和学习。...
在这里,我们将用CSS来定制输入框和字符计数显示区域的样式,比如颜色、大小、位置等。我们可以使用类选择器来定位特定的HTML元素,并应用样式。 JavaScript是实现动态交互的关键。jQuery库使JavaScript代码更加...
为了解决这个问题,开发者改用了`oninput`事件,该事件会在元素内容发生改变时触发,包括字符的添加、删除或通过剪贴板操作,因此更适合用于字符计数限制。 以下是一个简单的HTML结构,包含多个`<textarea>`元素: ...
默认情况下,`<textarea>`没有内置的字符限制功能,所以需要通过JavaScript或者其他方式来实现这个功能。 在JavaScript中,我们可以监听`textarea`的`input`事件,每当用户输入时检查当前的字符数,并在达到预设...
"文本域限制"这个话题涉及到如何有效地控制用户在文本域中输入的字符数量,以及区分字母和汉字的计数规则。 首先,我们来探讨如何限制多行文本域的字符个数。在HTML中,`<textarea>`标签用于创建文本域,但默认情况...