jQuery实时统计输入框字数及限制
编程学习 2021-07-04 15:03www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了jQuery实时统计输入框字数及限制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
项目中经常会用到文本输入框，而且需要限制输入的字数。
狼蚁网站SEO优化分享一个 jQuery 实时统计输入框输入字数及限制输入字数的方法，代码如下：
HTML：简单的写一下，能实现功能即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery实时统计输入框字数及限制的方法</title>
<style>
#content{
border: none;
outline: none;
resize: none;
width: 200px;
height: 100px;
border: 1px solid #ccc;
border-radius: 6px;
padding: 4px;
}
</style>
</head>
<body>
<textarea id="content" placeholder="新消息内容" ></textarea>
<span class="contentcount">0</span>/200
<script src="./jquery.js"></script>
<script>
$('#content').bind('input propertychange',function(){
var count = $(this).val().length; //获取输入的字数
if(count > 200){
var char = $(this).val();
char = char.substr(0,200); //截取前200的字符串
$(this).val(char);
count = 200;
alert('超出200了')
}
$('.contentcount').text(count);
})
</script>
</body>
</html>
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。