记一次前端 input、textarea输入框实时 统计字数(真实字数)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/github_38854224/article/details/89393538

需求:实时监听textarea/input的输入变化,并在页面上显示还能够输入多少字符。

初始做法(有问题,不准确):

仅仅使用on keyup事件  :导致在输入的时候会根据输入法状态把汉字拼音算进去,在换成汉字时并不改变统计结果

如下图:

改过的方法 使用多个事件绑定(可行):

//实时监听字数变化
$(document).ready(function(){
    $('.input').on('input focus keyup',
        function(){
			var strs   = getByteLen($(this).val());
			remain = strs.length;
			var content_msg = remain+'字';
			$(this).next().html(content_msg);			
        }
    );
});


//获取除标点符号之外的字数
function getByteLen(val) {
	strs = val.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\,|\。|\?|\:|\;|\‘|\’|\”|\“|\、|\·|\!|\(|\)|\》|\《|\『|\』]/g,""); 
	//let recxType = /^[0-9A-Za-z\u4e00-\u9fa5]{15,}$/;
	return strs; 
}

猜你喜欢

转载自blog.csdn.net/github_38854224/article/details/89393538