当前位置:首页 > Web开发 > 正文

为了兼容性好些

2024-03-31 Web开发

一、先看效果图

技术图片

效果如图,当输入文字的时候,提示区域动态的显示已输入的字数和最大输入的字数。非每每用的小成果。
二、常识点
常识点对照简单,,为了兼容性好些,我多用了几个事件input、propertychange、paste、keyup。此刻好多用vue等框架写,我暂时先用jQuery写了,原因是读者对照好理解,需要其他方法也便于改削,妙手预计也不用看这些对象啦哈哈哈。
三、上代码。
我当初学习的时候就但愿多看demo,可我找到的资料往往是讲一些要点,写一些代码片段,所以我尽量的直接上代码了。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://www.mamicode.com/js/jquery-2.1.0.js"></script> </head> <body> <div> <textarea rows="8" cols="15"></textarea> <span></span> </div> <div> <!--这里是显示提示的区域--> </div> <script type="text/javascript"> LimitedNnumber("#text", "#viewBox", 9)//挪用函数需要传入三个参数,分袂为,输入框、显示框、限制的长度(这里是9) function LimitedNnumber(eventBox, viewBox, textLength) {//挪用函数需要传入三个参数,分袂为,输入框、显示框、限制的长度 $(document).on(‘input propertychange paste keyup‘, eventBox, function(event) { this.value = this.value.replace(this.value.slice(textLength), "")//超过长度的部分替换为空 $(viewBox).html(this.value.length + "http://www.mamicode.com/" + textLength) }) } </script> </body> </html>

js 实现textarea输入字数提示

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/31303.html