Posted in jQuery onJune 24, 2020
项目中经常会用到文本输入框，而且需要限制输入的字数。
下面分享一个 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>
效果如下
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
jQuery实时统计输入框字数及限制
- Author -
Jeslie-He声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@