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

来源:互联网 发布:硬盘坏了数据恢复价格 编辑:程序博客网 时间:2024/05/01 02:19
<!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="" onkeyup="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>