textarea文本域输入字数实时控制

最新推荐文章于 2019-09-20 05:49:42 发布

W_Clarence

最新推荐文章于 2019-09-20 05:49:42 发布

阅读量374

点赞数 1

文章标签： onkeyup事件

本文链接：https://blog.csdn.net/W_Clarence/article/details/78215853

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>实时控制字数</title>

<style type="text/css">

			* {
				padding: 0;
				margin: 0;
			}
			
			.box {
				width: 400px;
				height: 300px;
				margin: 20px auto;
			}
			
			.box textarea {
				width: 400px;
				height: 270px;
				font-size: 20px;
			}
		</style>

</head>

<body>

<div class="box">
			<textarea name="" οnkeyup="numTip()" maxlength="100" id="textArea"></textarea>
			<p dir="rtl"><span id="currentNum">100</span>/100</p>
		</div>

</body>
<script src="jquery-3.2.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function numTip() {
$("#currentNum").text(100 - $("#textArea").val().length);
if($("#textArea").val().length >= 90) {
$("#currentNum").css("color", 'red');
} else {
$("#currentNum").css("color", 'black');
}
}
</script>

</html>