第一百四十二章 聚焦于此

前面我们说了,页面中的元素,只有一部分可以获得焦点。表单中(用于输入)的元素,因为需要进行输入,所以基本都可以获得焦点。其他的还有比如链接,如果我们尝试用键盘在页面内进行导航的话,会发现链接也是可以获得焦点的。

在新版本的浏览器中,我们可以通过给元素添加 tabindex 属性,使原本不能被聚焦的元素可以聚焦。需要深入了解这个功能的小伙伴可以自己查阅文档,也是一个十分简单的操作,只是需要考虑浏览器的支持情况。

一个元素获得焦点,或者说被聚焦,一般在它外面会有一个高亮的边框,这是浏览器给予的样式,为了便于我们识别当前元素的聚焦状态。这个边框的样式也是可以进行一定自定义的。对于表单中的元素,它获得焦点之后,我们输入的内容就会出现在这个元素里面,或者我们所做的一些操作会对这个元素起作用(对于单选框或者复选框,一般的我们可以使用空格键进行选择和取消选择的切换)。如果这是一个链接元素,当它获得焦点的时候,我们点击回车,相当于对这个元素进行了点击。

元素获得焦点,是一个事件,标志着这个元素聚焦的状态发生了改变。这个事件是:focus。利用这个事件,我们可以做许多事情,比如在输入框内原本是有提示的文字,当它获得焦点之后,就把提示的文字清空。(不过现在有 placeholder 属性专门做这件事情了)。反过来我们也可以用 focus 来触发这个事件,结果就是让指定的元素获得焦点,方便用户进行操作。比如我写了一个搜索页面,那么,我可以认为在这个页面中的所有输入操作,默认都是希望写在输入框内的。所以一旦进入这个页面,就自动让输入框获得输入的焦点,这样用起来就很方便。

有获得就会有失去,blur 事件表示一个元素从拥有焦点的状态,到失去焦点的状态,这个改变的瞬间。于是参照上面的例子,在失去焦点的时候,我们判断一下输入框里面如果是空的,就是并没有被输入东西,那我们就再把提示文字显示出来。而那个搜索页面,当输入框失去焦点的时候,我们就让它重新获取焦点,这样就可以保证焦点一直在输入框内了(机智~)。我们也可以使用这个方法,让元素失去焦点。

这是关于元素获得和失去焦点的两个事件。结合我们前面所学的知识,已经可以做出很多有趣的东西来了。因为它们的使用也非常的简单,大家只要自己动手做几个基础的练习,就能够很好的理解,所以我就不在这里带着大家写代码了。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百四十二章 聚焦于此

打赏

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

支付宝扫一扫打赏

微信扫一扫打赏