先根據需求把樣式寫好
image.png
<div class="intro">
<div class="f_head">簡介:</div>
<div>
<textarea name="intro" id="intro" cols="45" rows="6" style="resize:none" maxlength="50"></textarea>
<p class="number_hint">
<span id="b">0</span>
<span id="c">/50</span>
</p>
<p class="erro_s">簡介內容5~50個字符之間</p>
</div>
</div>
$("#intro").keyup(function() {
if (intro.value.length > 50) {
intro.value = intro.value.slice(0, 50);
$("#b").html("50");
$("#c").html("0");
} else {
$("#b").html(intro.value.length + "/");
$("#c").html(50 - parseInt($("#b").html()));
}
});
在其他JS框架中就更簡單了，有數據綁定
<textarea id="message " rows="3 " [(ngModel)]="item.message " maxlength="150"
(keyup)="checkTextarea(item.message)"></textarea>
<span class="textarea__count">{{item.message?.length}}/150</span>
