js 文本框字符输入个数统计
//本文是1个汉字一个字符，一个非汉字半个字符。
当时博主第一时间想到的是动态截取字符串，获取需要长度的前几个字符截取，发现最后键入拼音输汉字时,substring()剪切会导致拼音无法完整拼入。拼至需要字符被自动截断。现在即使已经输入足够字数,输入编辑器还是照常显示,汉字输入进入框时才会计算其个数,做到控制字数。
于是发现了事件：compositionstart、compositionend.
compositionstart:在输入法编辑器打开的时候触发。
compositionend:在输入编辑器关闭的时候触发。
于是博主使用三种事件触发，分别为compositionstart,input,compositionend。
注：其触发顺序为compositionstart,input,compositionend。因此造成compositionend输入编辑器关闭时无法触发input事件，因此compositionend时再次出发其事件。
代码如下：注：引入jq
<html>
<head>
<meta charset="utf-8">
<title>js判断输入字符串长度（汉字算两个字符，字母数字算一个）</title>
<style>
.label_footer{
position: absolute;
right: 5px;
top:5px;
}
.back_title{
width: 300px;
height: 30px;
position: relative;
}
input{
width: 300px;
height: 30px;
padding-right: 30px;
}
</style>
</head>
<body>
<div class="back_title">
<input type="text" class="input-number8" placeholder="请输入" value="">
<div class="label_footer ">
<span class="number8-control"></span><span>/8</span>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).on('input','.input-number8',function() {
if($(this).prop('comStart')) return;
checkLength('.number8-control',8,$(this));
}).on('compositionstart','.input-number8',function(){
$(this).prop('comStart', true);
}).on('compositionend','.input-number8', function(){
$(this).prop('comStart', false);
checkLength('.number8-control',8,$(this));
});
//判断字符串长度
var j;
function checkLength(className,size,$e) {
var len = 0;
var val = $e.val();
for (var i = 0; i < val.length; i++) {
var a = val.charAt(i);
if (a.match(/[^\x00-\xff]/ig) != null) {
len += 1;
}
else {
len += 0.5;
}
if(parseInt(len) == size){
if(len == size){
j = i+1; //2个拼音才算一个字符，考虑到8.5个字符因此做了控制。避免多输入字符。
}else{
j = i;
}
}
}
if(len >= size){
$e.val(val.substring(0,j));
$e.siblings().children(className).text(size);
}else {
$e.siblings().children(className).text(parseInt(len).toString());
}
}
</script>
</body>
</html>
如有问题，请提出，谢谢。
