00:00
好嘞,各位,那在这一小节呢,咱们来学一下view里的这个键盘事件,是这样的,各位啊,既然学键盘事件,我肯定得给很多的按键绑定监听,为了便于你知道我到底的是哪个按键呢,我把我电脑的这个按键提示打开,走,我打开了,接下来我在键盘上所摁的任何一个按键都会提示在屏幕上,你比如说Q是吧,我摁一下七,我摁下CTRL,摁下out,摁一下shift都是有提示的,这样的话呢,就便于你观察了,我呢,也省了很多的事儿啊,要不每次还得告诉你,哎,我摁了啥啥啥是吧?诶,好,做一个简单的效果啊,各位在这儿呢,写一个音input的框啊,平时你不用看我这提示啊,你比如说我在这写一个东西,你在这还看这提示,那没必要,是不,哎,等我去处理事件的时候,你再去观察啊,好,我在这儿呢,写一个place holder提示啊,我这么写叫做按下回车提示输入就以后这里边我会输入一些东西,输入完了在这个input框里面按下回车,诶,然后就能提示你所输入的数据。
01:00
那我肯定得给他绑定事件对吧?F,但是不能是click,你说对吗?各位click click那是点击事件的,我得绑定一个键盘事件,键盘事件呢常用的有两个对吧?你基础的时候应该学过,一个叫做key down是吧?一个叫做什么呢?Key up,它俩之间的区别是什么呀?Key down呢,就是你按下这个按键,不用你抬起来就触发时间,那么keep up就属于你按下去了,然后抬起来了,哎,说的再直白点,按下去你松手了,哎,然后再触发keep up是吧?那一般用哪个呢?一般用这个key up是吧?你说老师我就想用提档,那也没啥影响是吧?好了,来走,那给一个回调吧,叫做受音否,还是展示信息,把这名字复制过来,这边得用,然后呢,我就得配置一个MYS名字叫做受音否,走里边呢,是这样啊各位,我先不用alert,因为那alert呀,太烦了,我先用那个consollo好吧,哎,输出输出什么呢?输出input框里边你所输入的值好,那怎么拿呢?很简单,借助事件对。
02:00
点谁呢?它给它点Y6不就拿到这个元素里边的值了吗?好,那我们看一下效果啊打开。空台呢也切好啊,接下来我输入了啊123,你发现了什么。好像没有等我按下回车,它就已经提示这个输入了,对吧?这是不对的,也就是说我们得判断一下,你不能说什么按键都去触罚这个首音,否得是回车,那问题是怎么判断回车呢?有一个最原始的办法,就是借助event身上的按键编码,对吗?各位来event点身上有一个K扣的,就是代表你这个按键的编码,好了,回到这儿,你比如说啊,我摁下字母A,它的编码是65,按下X它是88,按下回车呢,它是13,哎,那在这儿呢,我们就能判断了,对吧?各位好,写一个判断,如果1.k扣的,只要它不等于13,我就做一件事,把逻辑停掉是不是就可以了,这块儿解开好,这功能不就实现了吗?输入123不提示按下回车是不是再提示啊?好,回来在view当中呢,各位你不用亲自的去判断这个回车,你把第49行啊给它删掉,然后你只需要做这么一件事儿,在这个键盘事件的后面啊,给它来一个修饰叫点。
03:17
In就代表回车了,来我们先看效果啊,输入123回车是吧?啊,你输入别的,你比如说456啊,什么ABC啊,这么一有反应好回来,你看这多方便呀,哎,我们管这个东西啊同学叫做别名view呢,给常用的一些按键呢,都起了别名,一共有几个呢?有九个,我们看一下啊,回车删除退出是吧,然后是空格换行,上下左右,这是vu给我们提供的这几个常用的这个别名啊,然后我们测试一下啊各位比如说呢,这我不写点了,我写点delete.delete就是删除你键盘上啊其实有两个按键各位,一个叫退格键,就是东西输入多了往下删,还有一个删除键,就是那个delete,我们都测试一下啊,你输入的是123来说输入多了,那我想往下删,我按那个删除键走是不是能出发,然后呢,我按那个delete删除键啊走是吧,所以说咱平时吧都说是删除,其实它是退格和删除,对吧,我们平时说哎东西输入多了。
04:17
我们删一下,其实你摁的是退格键是吧?好,然后还有什么呢?ESC,我们再试一下,走保存回到这儿,输入123,然后呢,按一下ESC,你看是不是也可以,然后剩下的这些吧,大家自己下去就可以去测试测试好吧,然后讲到这儿呢,可能有同学就说了,老师啊,那你说U给我提供了这九个常用的别名啊,是我在这儿能用,那万一我想绑定事件的那个按键呀,没有出现在这九个常用的按键里面,那怎么办呀?比如说举个例子啊,键盘上呢,有一个切换大小写的那个按键,对吧,各位叫做cap lock,我现在就想给他绑定事件。哎,就这input框输入完123之后啊,我按下切换大小写这个cap lock就能提示输入,那怎么办?诶同学你就不能直接用人家这个了,这里边没有给你提供吗?诶,那怎么办呀,你可以用这么一个办法,首先铺垫一个事情,键盘上任何一个按键都有自己的名字和自己的编码,咱们就拿回车键举例子,同学他的名字是ENT,改一下ENT啊,然后他的编码呢,是13,各位,这个E是大写的,知道吧,这13诶是一个纯数字的形式。至于说vu里面为什么刚才我们用了小写的en t,那是view给你起的一个别名,哎,View为了方便你去写,所以说view呢,在这给你弄成小写的了,明白不说老师呢,听你这意思,我用大写的也行,是的,En同学,大写的en t才是回车这个键子真正的名字知道不?你通过最原始的GS,你去拿回车那个键子的名字,它是大。
05:55
写的ENT,那你看一下各位,我写123推车能不能行,哎,也是可以的,但是我们几乎不这样写,肯定写小写的,因为方便,对不说老师那按键叫什么名,我怎么拿呀,是不是我那个按键上印的那个文字是啥,它就叫什么名啊,不是啊,你可以这么去拿,各位啊,我把这in特呢先删掉好,然后在这儿啊,我不输出value,我输出这么一个东西啊,叫做event.key注意啊,不是key code的key code的是这个按键的编码,那这个key呢,就是这个按键的名字,我们都给大家输出一下啊,我这写个key扣的好,你瞧效果啊,各位回到这个输入框里面,我按下CTRL键走,同学,你看它的名字叫做crler啊,它的编码值是17,对不?诶,我再按一下回车,你看它确实叫in,然后是13啊,我再按一下那个alt键是吧,Alt alt它是18好吧,各位,那我用的是哪个键字,想用哪个是不是切换大小写那个走它叫什么名字cap lock,然后。
06:55
是20,但是你注意啊,同学,我给你画个图,他们三个和这个还不一样,你看啊,他们三个是不是都是一个单词组成的,但是你看它呢,是不是两个单词,你看这不大驼峰吗?Cap lock是吧?诶这会你就值得你注意了,说老师那我注意啥呀,他爱什么名什么名呗,你看着啊同学我把这个lock呀,给你复制过来,回到这儿,然后呢,我这样写点cap lock,你说我是啥意思,就是只有我按下cap lock的时候才去输出这个里边的值,那我把这住掉,给这打开,你的本意是这样对吧?哎,那我们看看啊,输入123,哎,然后呢,我按一下那个切换大小写那个啊来走,同学你看。
07:33
没有效果对吗?我确实摁了,你看有提示了,但是这儿没有反应,为什么呀,因为你用的不对,像这种由多个单词组成的啊各位你把这C呀得小写,这L啊也得小写,并且两个不同的单词之间,你得用杠进行一个连接,哎这回就行了,你瞧着输入123按一下切换大小写那个走可以吧,诶说老师咋这么麻烦呀,同学呀,很少有这种需求,说按下这个大小写,然后我去干什么事儿,常见的那些按键呀,人家都给你预想到了,而且都给你起了一个好听的名字,OK啊说老师那就是所有按键我都能绑定事件,也不是各位你键盘上啊,有一些按键是不能绑事键的,你比如说同学像我这有一个外置的键盘,单独去控制那个音量大小的,你这个东西同学你没发现我的键盘捕获软件都没有捕获到我这两个按键的按下吗?对吧,你看我按下,比如说我按下一个P,你看它是有反应的,但是我按下这个它是没有的,还有就是调什么键盘背光的这个这些东西各位它没法绑。
08:33
键不是说所有的东西都能绑,OK,键盘五花八门,很多按键是不可以的,你就没法被识别好吧,哎,同学这么说吧,常见的其实这九个呀,差不多就够用了好吧,哎,然后呢,还有一个注意点,各位你听我说啊,在众多可以绑事件的案件里面啊,有五个特殊的人。这几个人呢,表面上看呀,好像不好用,实际上啊,它里边有一些别的文章在啊,那我们看一下各位,比如说谁呢,我告诉你啊,就整个他给你提供的这些常见的别名里面啊,就这个人他挺奇怪的,就是一个换行符tab,来我们去验证一下啊各位你看着我在这儿呢,不写lock了,我写table,你说我啥意思各位。
09:14
输入完东西摁一下tab键,然后是不是才能提示输入啊,按一点t.Y6,那你看一下各位来走我输入123了啊,然后呢,我准备摁这个T,我摁没摁,你看屏幕你就知道了,对不对,好了,我摁完了同学有提示吗?没有来我再给你演示一下走有提示吗?没有,为什么。哎,这会儿就得说一下,同学你说这个tab键啊,它本身就有一个功能。就是把这个焦点从当前元素身上切走,你看我123在这儿呢,我光标在这闪烁呢,是不是input框在获取焦点的呀,然后我按下tab的时候,你注意啊,走同学,这个焦点来在这儿了,我再按下tab,诶又来到这个地址了,我再按下tab又来到这儿了,我再按下诶,它又来到这了,所以说同学tab键本身就有一个神奇的功能,就是把这个焦点从当前元素身上切走,你摁下了tab键。
10:06
不用,等tap键抬起来,我告诉你各位,它就已经切走了,而你的事件是给哪块绑的,是不是key up,那这样的话就会导致我摁下的tap键之后啊,已经失去对这个元素获取焦点了,那你肯定这个事件就触发不了了,所以说同学你像tab键啊,你就不适合用key up啊,你得用什么呢?Key档你换成key档马上就好用,你看一下输入123对吧,各位,然后你看我按一下tap诶好用不好用,朱老师不切走了吗?切走就切走了呗,它本身的功能就是切走啊,啊实没实现你要的效果是不是实现了,哎,这是一个特殊的人,谁呢?Table键,哎大家可以记一下,我在这给大家补一下,在这儿写一个tap,写一下叫做特殊啊,叫做必须配合谁使用啊,这个key down去使用。复制过来好去使用,说老师那特殊的就只有这一个呗,不还有四个小兄弟也比较特殊啊,那四个人呢,同学分别是这么几个按键啊,叫control out shift,还有me键,好,我们一个一个来测试啊,我先把这呢改成正常的up,你先不用读我那注释啊,一会我带着你读,同学我在这呢,删掉写成CTRLCTRL对吧?哎,是控制键,那我的意思就是输入完东西按一下CTRL提示输入,对不好了,回到这儿,同学输入123,按一下CTRL,诶。
11:29
是吗?不提示啊,好,我们一一验证啊,看那几个有没有问题,同学出问题的,还有一个是out。刚才发现了CTRL好像不好用是吧?那试试OUT123,然后摁一下呢,Out也不提示对吗?好,回来那shift也是同理的,同学,这两个我就不再验证了,好吧,那说说这个按键是谁?同学,这个按键呀,就是你电脑上Windows的那个灰标键,说老师没懂啥叫Windows的灰标键同学,就这说吧,你电脑的键盘上你按下哪个按键能出现这玩意儿,那谁就是mate键对吧?啊,有的时候呢,我们也叫win键,同学,你看当我按下我电脑上的这个mate键的时候,你注意屏幕的左上角,你看叫win是吧?哎,叫做win,也就是说哪个呢?来同学,我给你找了一图,就是你键盘上的,一般来说这个Windows的电脑是不是都有这个呀?诶,苹果里边叫什么那个command键对吧?哎,这个呢,咱就别再纠结这事儿了啊,就是你按哪个能出现这个徽标啊是吧,哪个就是那个me键,好,这四个按键同学配合key up使用都是有问题的。
12:30
那为什么呢?因为这四个按键啊,同学叫做系统修饰键,这四个人的用法很特殊,这四个人呢,各位配合key up能用,配合key档呢也能用,那说老师你胡说,刚才明明我看见了CTRL这个CTRL键没有办法配合k up去工作呀,那你咋还说能配合k up去工作呢?啊说老师你看我输入123,我摁下CTRL,我键盘都敲碎了,他也没有效果呀,说一下同学像这种系统修饰键呀,你还配合了key up去使用,那值得你注意的点就是它的逻辑是这样的,同学你读按下修饰键的同时,再去按下其他按键,随后再释放那个其他案件事件才被处罚。
13:13
也就是说我得先按下CTRL,同时呢,我再去按下这个Y,随后呢,我再释放掉这个Y,然后才能触发事件,哎呦呵,挺麻烦的是吧?来咱试试各位啊,我呢现在绑定的是CTRL,然后回到这儿我输123了,对吗?各位,那接下来呢,我先说一下我要怎么摁,然后我再去这样摁啊先给你描述一下,我会摁一下CTRLY,然后再抬起来这个Y,好了,那我摁一下啊,走,同学你看触发事件了吧,说老师,别的组合行吗?可以,CTRL呢,配合任何一个都可以,比如说我按一下CTRL加I来走是不是也行?说老师那你摁一下CTRL加SCTRLS,你看同学你看后边那已经输出了一次触发了,但是它又触发了一个默认的动作,因为浏览器的CTRL加S是保存当前网页,你说对吧?好了,来取消,回到我们的代码中,所以说同学这四个东西都算作是系统修饰键,如果你配合key up,那就都得这么用,都是这套规则,但是如果你说配合key档去使用同学,那就简单了,来,把up删掉。
14:13
T档啊,我用的CTRL用的t down,那它的含义就是你摁一下这个CTRL呢,就触发,不用再配合别的人了,哎,那你看一下啊,刷新我输入123同学,我摁一下CTRL走事件是不是触发,诶这就是系统修饰键,还有一个点各位就是说我们能不能够通过其他的方式去给一个按键绑定监听。我刚才一直都用的是名对吗?啊,刚开始用的是viewu提供的别名,后来呢,用的是这个本身他自己有的那个名,完了转成那个杠的这个形式,对吧,纯小写的,那能不能通过别的方式啊,其实也可以,各位你可以通过码就是在这儿你可以点13。哎,啥意思,13不就代表回车吗?哎,所以说你看一下在这儿我输入123,然后呢,敲下回车是不是也可以,但是这种方式呢,你听我说各位不被推荐了,为什么呢?你打开浏览器啊,我们去找一个人MDN。
15:07
你就搜这个key code啊,走是不是在这儿呢?你点一下各位你看他说啥,该特性已从web标准中移除了,虽然有一些浏览器目前仍然支持它啊,但是也许会在未来的某个事件停止支持了啊,尽量不要使用该特性,也就是说一个最好的方式呢,就是通过按键的名字去给它绑定事件,而不是通过它的编码,同学,你知道为什么吗?因为不同的键盘吧,它那个编码呢,有点不统一,知道吧,你像回车这种一般来说比较统一,但是有的比如说在你键盘上的46和我键盘上的46编码可能是不同的按键,是吧?哎,好了,还有最后一个小点,就是我们能不能自已去定义一些别名呢?啊,你比如说我用的in inter都是view给我提供的,我能不能自已去弄一个呀,可以,同学你比如说在这想用回车,你这么写肯定不行啊,没有这别名,那怎么去弄这个别名呢?维又给我们提供了一种方式。
16:00
View点还是孔IG,它身上有一个叫做t cos,然后在这里边你可以加点,比如说回车,哎等于让他多少呢,13,那这样的话就相当于你诶定义了一个别名按键,定义了一个别名叫回车,回车是哪个键子啊,诶是13那个键子,那在这就回车,好那你看一下效果啊,回到这儿刷新一下啊123回车可以用不可以,但是这种方式的同学其实也不太推荐啊,因为什么呢?一般默认的这些啊也就够用了是吧?好,那这个呢,就是view里的这个键盘事件相关的知识好不啊,那这一小节呢,咱们。
我来说两句