多行文本框文字限制及文字当前数量获取textarea

最新推荐文章于 2022-09-08 18:47:44 发布

AS胖丁

最新推荐文章于 2022-09-08 18:47:44 发布

阅读量420

点赞数 2

分类专栏： js jquery 事件 css3 web前端文章标签： textarea jquery js

本文链接：https://blog.csdn.net/weixin_41641581/article/details/87270358

版权

web前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

效果：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>多行文本框文字限制及文字当前数量获取</title>
    <style type="text/css">
    	body,body *{
    		padding: 0;
    		margin: 0;
    	}
    	.textarea{
    		width: 400px;
    		margin: 50px auto;
    	}
    	textarea{
    		width:370px;
    		min-height:100px;
    		font-size: 16px;
    		padding: 15px;
    	}
    </style>
</head>
<body>
	<div class="textarea">
		<textarea name="" id="textarea" rows="" cols="" maxlength="300" placeholder="请输入"></textarea>
		<div class="textareaNum"><span id="textareaNum">0</span>/<span class="color-999 font-12">300</span></div>
	</div>
	<script src="http://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
      	$("#textarea").on('keyup',function(){
      		$("#textareaNum").html($(this).val().length)
      	})
    </script>
</body>
</html>

AS胖丁

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多行文本框文字限制及文字当前数量获取textarea

效果：代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scal
复制链接

扫一扫