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

马大哈小果果

于 2019-12-31 14:39:13 发布

阅读量177

点赞数 1

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/weixin_44698541/article/details/103782356

版权

JS 专栏收录该内容

7 篇文章

订阅专栏

<!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>