Web前端之文本域textarea显示输入剩余字数【支持多个文本框】

最新推荐文章于 2024-07-15 20:56:11 发布

Star航仔

最新推荐文章于 2024-07-15 20:56:11 发布

阅读量793

点赞数 1

本文链接：https://blog.csdn.net/weixin_41662207/article/details/98488616

版权

还是贴代码来的直接

<!DOCTYPE html>
<html>
<head>
    <title>TextArea</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>
<body>
<div class="box">
    <textarea class="text" maxlength="10"></textarea>
    <span class="num">0</span>
    <textarea class="text" maxlength="10"></textarea>
    <span class="num">0</span>
    <textarea class="text" maxlength="10"></textarea>
    <span class="num">0</span>
</div>
    <script type="text/javascript">
        window.onload = function(){
			$(".box textarea").each(function(e){
				var that = $(this)
				$(this).on('input propertychange',function(e){
					that.next().html(e.target.value.length);
					if(that.next().html() == 10){
						that.next().css("color" , "red");
					}else{
						that.next().css("color" , "#999");
					}
				});
			})
            
        }
    </script>
</body>
</html>