200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > textarea输入框监听和输入字数限制以及样式设置

textarea输入框监听和输入字数限制以及样式设置

时间:2021-10-25 23:11:33

相关推荐

textarea输入框监听和输入字数限制以及样式设置

html

<p class="describe">分类描述</p><div class="desc"><textarea class="wishContent" placeholder="请输入分类描述,最多255字。" maxlength="255" ></textarea><div class="wordsNum"><span class="wordsNum_v1">0</span><span class="wordsNum_v2">/255</span></div></div>

css

.content textarea {

border: none;

width: 94%;

height: 6.55rem;

margin: 0.2rem 0.5rem;

resize: none;其他样式忽略,这里主要设置文本域的右下角角标

}

js

<script>//封装一个限制字数方法var checkStrLengths = function (str, maxLength) {var maxLength = maxLength;var result = 0;if (str && str.length > maxLength) {result = maxLength;} else {result = str.length;}return result;};//监听输入$(".wishContent").on("input propertychange", function () {//获取输入内容var userDesc = $(this).val();//判断字数var len;if (userDesc) {len = checkStrLengths(userDesc, 255);} else {len = 0;}//显示字数及输入样式$(".wordsNum_v1").html(len);$(".wordsNum_v1").css("color", "rgb(51,51,51)");});</script>

效果如下图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。