就是总会需要有限制字数的时候,那么除了使用maxlength属性外,还可以怎么做呢
html
<div class="textarea_box">
<!-- <textarea name="send_info" cols="10" rows="4" placeholder="输入想要对她说的话......" class="peoplesendcontent"></textarea> -->
<input name="send_info" placeholder="输入想要对她说的话......" class="peoplesendcontent">
<div class="text-count"><span id="text-count">0</span><span>/4</span></div>
</div>
css
.textarea_box,.peoplesendcontent{
position: relative;
width: 750px;
height: 200px;
}
.text-count{
position: absolute;
right: 0;
bottom: 0;
display: flex;
width: auto;
height: 30px;
font-size: 24px;
line-height: 30px;
color: #666;
}
js
$(".peoplesendcontent").on("input propertychange", function() {
var $this = $(this),
_val = $this.val(),
count = "";
if (_val.length > 4) {
$this.val(_val.substring(0, 4));
}
count = $this.val().length;
$("#text-count").text(count);
});
最后,不要忘了引入jq库哦~