输入框实时字数计算移动端bug解决

作者：旺仔

如上图所示的输入框的字体计算在各大网站上是在熟悉不过的了，当然在pc端制作起来也是相当简单，只要捕捉键盘事件对输入框中的字数进行获取，再用限制字数减去获取的字数便可以实时计算出“还可以输入多少字”。但是在移动端这个方法还像是不可行的，第一，pc端可以使用keyup或者keydown进行事件捕捉，当然移动端也可以使用他们，但是在移动端拼音输入时就会出现下图的情况：

当我拼音输入完毕要选择我的目标汉字时，键盘上方的汉字“我是你大哥”就不属于键盘的一部分了，所以这个时候点击”我是你大哥“进行选择是就不会触发keyup或者keydown事件，那么下方的“还可以输入**”字“就会出现错误，也就会出现bug。下面我就把pc端的字数计算与移动端的字数计算全都写出来：

1.pc端方法：

$("textarea").on("keyup",function(){
    var textLength = $("textarea").val().length;
    var numLength = 500-textLength;
    $(".takeTip span").text(numLength);
})

已上是最常用的一种方法，这种方法在pc端完美运行，很简单。

2.移动端方法：

	setInterval(function(){
			var textLength = $("textarea").val().length;
			var numLength = 500-textLength;
			$(".takeTip span").text(numLength);
		},100)

因为移动端方法会出现keyup无法触发的问题，所以就只能不用与键盘相关的事件来进行捕捉，使用setInterval函数来进行实时的监控，在移动端完美运行。