第一百四十一章 敲击键盘

鼠标相关的事件我们讲完了,接下来自然就是键盘。我们对于键盘的操作当然就是敲击按键。而这个过程分为两个阶段,首先是我们把按键按下去,然后是我们松开按键。这两个阶段正好是按键状态变化的两个时间点,对,时间点,关键的时间点。所以这里是两个事件,keydown 和 keyup

按键的事件,可以绑定到任何元素上,但是事件只会发送到具有焦点的元素上。就是说,首先这个元素要具有焦点,否则我们就不知道这是在哪个元素上进行输入了。然后当产生按键操作的时候,才会触发这个元素上对应的事件。

但是,并不是所有元素都可以具有焦点。而哪些元素可以具有焦点,不同浏览器的表现又不一样。不过,表单中(用以获取输入)的元素,在各种浏览器下都是可以获得焦点的。

到这里,我们就把键盘事件讲完……了?!然而并没有,因为一旦发生键盘事件,反正就是按键被按下去,弹上来的时候。我们会关注另外一个问题,就是用户刚刚按下去的是哪一个键?

这个问题很关键,因为不能够了解这一点,我们程序就只好在用户按任何按键的时候都响应,那就很傻了。

这里的两种事件,从名称上也可以看出来,重点关注的是按键的下去和上来。你它们,刚才究竟是按下了哪个按键?它们是知道的,也会告诉你。但是,用户按下了键盘上的 A,它也如实的告诉你了这件事情。那么现在请问:用户究竟输入的是 a 还是 A?是的,这两种事件的关注点在于按键,而不在于输入的内容。

这时候就要讲到第三种事件了,它会在 keydown 发生之后,紧随其后的发生。它所关注的是用户的输入,而不是按下的按键。所以在上面的问题中,通过这个事件可以区分出用户输入的大小写。这个事件是 keypress

但是因为 keypress 关注的是输入,所以对于一些功能按键,就是不产生实际输入的按键,是不会触发这个事件的。哪些按键算是功能按键呢?不同的浏览器有着不同的定义。这就很气人啊,不过也不用生气,因为这个事件并不支持中文,所以对我们来说很鸡肋。而且,如果是监控输入框上的这些事件,我们完全可以通过输入框当前的内容,来判断用户究竟进行了何种输入。这样用 keydown 也就够了。

说了半天,可是我们怎么获取用户按下的按键是哪个?

如果前面我所讲的内容你有认真的去做练习,我觉得,我即便不讲,你也应该有所了解了。

我们给事件绑定了一个函数,当事件被触发的时候,会传递给这个函数有一个参数,这个参数是一个对象,它包含有这个事件相关的许多信息。这些信息里就有我们所需要的这些内容。再次建议大家自己动手尝试,并进行观察,方法我在前面也已经讲过了。

通过观察我们会发现,有专门的属性用来描述当前键盘上的某些功能键(Shift、Ctrl、Alt)是否被按下。通过这些我们可以去判断组合键。

当然上面这部分只是其中很小的一些特例,对于大部分按键来说,我们可以获取当前按键的 keycode,就是按键的编码。它是一个数值,对应了当前按下的按键是哪一个。而这种编码是有统一的标准的,所以知道编码,就知道了按下的是哪一个按键。

讲到这里,通过自己观察事件数据,应该就可以实际利用了。但是,有一个问题新人并不了解,就是事件产生的数据,因为浏览器的不同而不同。而按键编码这个数据,在不同浏览器下,数据的名称(可能)也有所差异……这就十分气人了!

不过,还好,我们使用了工具箱(jQuery),并发现工具箱中有一个专门处理这个问题的工具——which。使用方法如下:

$('#input').keydown(function(event){console.log('当前按键的编码是:'+event.which)})

差不多就是用这个工具直接问事件数据,按键的编码是哪一个(which)?这个方法也可以获得鼠标的按键值。

那如果我按着按键一直不松手,又会发生些什么呢?希望大家动手研究一番。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百四十一章 敲击键盘

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏