方案一
- input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化,propertychange,只要当前对象属性发生改变。
<textarea id="area" name="ss" placeholder="请输入文本内容"></textarea>
<p><span id="text-count">20</span>/20</p>
<script type="text/javascript">
$("#area").on("input propertychange", function() {
var $this = $(this),
_val = $this.val(),
count = "";
if (_val.length > 20) {
$this.val(_val.substring(0, 20));
}
count = 20 - $this.val().length;
$("#text-count").text(count);
});
</script>
方案二
- 同时绑定change和keydown事件,再配合maxlength属性
<textarea
maxlength="100"
onchange="this.value=this.value.substring(0, 100)"
onkeydown="this.value=this.value.substring(0, 100)"
placeholder="添加备注信息,不超过100字" id="sk_notes"></textarea>