input实时监控输入字数，完美解决

原创于 2018-06-29 16:10:19 发布 · 6.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#input

前端专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何实现对input元素的实时字数监控，完美解决了拼音输入和空格输入导致字数变化的问题，提供了一种有效的解决方案。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title></title>
</head>
<body>
<textarea style="resize:none" name="text" id="txt" cols="30" rows="10"></textarea>
<span class="title2 hide"><span>0</span>/10</span>
<script>
var flag = true;
$('#txt').on('compositionstart',function(){
flag = false;
})
$('#txt').on('compositionend',function(){
flag = true;
})
$('#txt').on('input',function(){
setTimeout(function(){
if(flag){
var num = $("#txt").val().replace(/\s+/g,"").length;
if(num<10){
$("#txt").removeAttr("maxlength");
$(".title2").html('<span>'+num+'</span>' + '/10');
}
else{
$(".title2 span").text(num);
$("#txt").attr("maxlength",10);
}
}
},0)
})
</script>
</body>

</html>

其中 style="resize:none" 起固定作用，可根据需求删除

解决了拼音输入改变字数、空格输入等问题