js校验文本框剩余字数输入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>剩余字数输入</title>
	</head>
	<body>
		<textarea id="text_txt1"></textarea>
		<span id ="num_txt1">剩余可输入50</span>
	</body>
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script>
		$(function(){
		   $('#text_txt1').on('keyup',function(){
		       	var txtval = $('#text_txt1').val().length;
			    console.log(txtval);
			    var str = parseInt(50-txtval);
			    console.log(str);
			    if(str > 0 ){
			        $('#num_txt1').html('剩余可输入'+str+'字');
			    }else{
			        $('#num_txt1').html('剩余可输入0字');
			        $('#text_txt1').val($('#text_txt1').val().substring(0,50)); //这里意思是当里面的文字小于等于0的时候,那么字数不能再增加,只能是600个字
			    }
			});
		})
	</script>
</html>

posted @ 2019-12-31 14:39  马大哈小果果  阅读(173)  评论(0)    收藏  举报