js实现输入长度的限制,兼容中文输入的办法

复合输入的长度限制

我们在项目中,可能会经常遇到输入框输入汉字 + 字母/符号等混合内容,并要对内容进行长度限制的需求.

很多朋友喜欢直接对拿到的输入的value进行长度限制,但是实际做过的朋友可能都会遇到问题,当输入中文、日文这种需要多个字母拼成一个文字的语言时,往往文字没有输入完成,拼写的文字就已经超出长度的限制了.从而导致,无法输入;

为了要解决这个问题,需要知道,用户正在输入的文字是否是复合输入.
如果是复合输入,我们要想办法监听复合输入的结果,而不是输入的过程.
如果是非复合输入,我们只需要监听oninput事件就可以了
所以,我们这里为了解决问题,需要用到compositionstart、compositionend、input这几个事件来实现复合输入的长度限制

// 开关,是否是复合输入
let isComposition = false;
// 可以输入的最大长度
const maxLength = 10;

// 长度验证规格
function maxLengthRule(value){
	// 获取输入内容的长度边界
	const limit = value.length <= maxLength;
	
	// 如果长度超出了最大长度
	if(!limit){
		const resVal = value.substring(0,maxLength);
		textarea.value = resVal;
		console.log('得到长度范围内的输入内容');
	}
}

// 复合输入开始
textarea.addEventListener('compositionstart',(e) => {
	isComposition = true;
})

// 复合输入结束
textarea.addEventListener('compositionend',(e) => {
	if(isComposition){
		maxLengthRule(textarea.value)
	}
	
	isComposition = false;
})

// 非复合输入
textarea.addEventListener('input',(e) => {
	if(!isComposition){
		const value = e.target.value;
		maxLengthRule(value);
	}
})