手机端textarea中输入字数监控

应产品的需求,在前端输入文字的时候,需要监控当前输入了多少字。找了很久,才找到几个监控输入的方法。

一开始用input测试时候,发现在输入中文的过程中。文字还没有确定,只是在输入拼音过程中,就会被触发。

而后找了compositionend,但是发现在输入英文时候就没法触发此方法(不知道时候不是姿势不正确导致的)。compositionend对应的有compositionstart方法,在输入开始时候会被触发。但是三个每个方法都无法满足要求。后来参照google到的一个哥们写的东西完成了监控。

isLock = false;//是否锁定当前的输入状态
//输入即可触发【不区分中文和英文】
document.querySelector('#textarea').addEventListener('input',function(){
	//只有在非中文输入状态的时候,才能更改数字
	if(!isLock){
		var num = this.value.length;
		console.log(num);
	}
})
//中文输入开始的时候,会触发此函数
document.querySelector('#textarea').addEventListener('compositionstart',function(){
	isLock = true;//此时在输入中,加锁
})
//中文输入结束的时候,会触发此方法
document.querySelector('#textarea').addEventListener('compositionend',function(){
	var num = this.value.length;
	console.log(num);
	isLock = false;
})



参照:https://segmentfault.com/a/1190000007514184

你可能感兴趣的:(js)