input、textarea输入框限制字数+显示字数

tech2022-10-03  101

就是总会需要有限制字数的时候,那么除了使用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库哦~

最新回复(0)