前端页面数据处理input、textarea输入框实时统计字数（真实字数）

最新推荐文章于 2024-06-30 15:13:35 发布

原创最新推荐文章于 2024-06-30 15:13:35 发布 · 4.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js动态获取字数

样式数据处理 H5 vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种改进的实时字数统计方法，通过结合多种事件监听（如input、focus、keyup），解决了仅使用onkeyup事件在输入法切换时统计不准确的问题。详细展示了如何在用户输入时动态更新剩余可输入字符数，适用于网页表单中对输入长度有限制的场景。

需求：实时监听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; 
}