用js实现在文本框中检测字数和限制字数功能

最新推荐文章于 2021-05-13 13:44:03 发布

jackljf

最新推荐文章于 2021-05-13 13:44:03 发布

阅读量1.8k

点赞数

分类专栏： JS 文章标签： function string input

本文链接：https://blog.csdn.net/jackljf/article/details/7915399

版权

JS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

方法一：在文本框能区分并限制中文英文字数功能
首先，既然要限制字数，肯定要想办法实时获取用户在文本框里输入的文字的数量。input控件有个length的属性，可以方便地获取字数。可是，它所返回的字数无论是中文还是英文或者数字，1个字就算1个字。客户要限制字数的原因是为了页面显示的时候排版不会乱，因此一个汉字需要按2个英文字符来计算。这样的话，这个默认的length失效了。
怎么区分中文和英文呢？string对象有一个叫charCodeAt(index)的方法，可以获取字符串中某一个字符的编码。因为字母数字的ascii编码都小于255而汉字的编码肯定大于255，因此我们可以使用此方法来判断字符串占用多少英文字符的宽度。

效果如下图：

代码：

$('.titleArea').keyup(function () {
	var hidTitleWordNum = parseInt($('.hidTitleWordNum').val());
	var titleAreaVal = $('.titleArea').val();

	var sum = 0;
	for (var i = 0; i < titleAreaVal.length; i++) {
		if ((titleAreaVal.charCodeAt(i) >= 0) && (titleAreaVal.charCodeAt(i) <= 255)) {
			sum = sum + 1;
		} else {
			sum = sum + 2;
		}
		if (sum > hidTitleWordNum) {
			alert("输入数据超长！不能再输入数据。");
			var str = titleAreaVal.substring(0, i);
			$('.titleArea').val(str);
			$('.titleWordNum').text(hidTitleWordNum - getLength($('.titleArea').val()));
			break;
		} else {
			$('.titleWordNum').text(hidTitleWordNum - getLength($('.titleArea').val()));
		}
	}
});