首頁 > web前端 > html教學 > HTML焦点与键盘事件_html/css_WEB-ITnose

HTML焦点与键盘事件_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:45:57
原創
1295 人瀏覽過

所谓焦点就是用户当前正在操作的对象,可以是某个元素,也可能是某个浏览器中的tab或window。比如用鼠标点击输入框,那么输入框就会成为焦点。使用键盘上的Tab键,又可以把焦点转移到另外一个元素或浏览器的其他区域。通过鼠标和键盘都可以转移焦点,甚至编辑焦点元素。

焦点元素

同一时间一个document只能有一个元素成为焦点,这个焦点元素可以使用JavaScript访问:

document.activeElement;
登入後複製

如果没有元素成为焦点,默认是body元素作为activeElement。成为焦点的元素对应CSS的:focus伪类。

但不是所有元素都可以成为焦点,只有拥有可获焦区域的DOM锚才可以称为焦点:

可获焦区域

可获焦区域可能是元素,元素的部分或用户代理管理的其他部分,每一个可获焦区域有一个DOM锚,这个锚是一个Node对象,Node对象的位置就是可获焦区域在DOM中的位置。可获焦区域的API目前就通过这个锚来操作可获焦区域。

不是所有Node都能表示焦点区域,Node要变成焦点区域需要满足一些条件。下表只是列出了一些常见的可获焦区域和它的DOM锚:

可获焦区域

DOM锚

有tabindex焦点标志,并且没有disabled属性的元素

元素本身

Image map中area的图形区域

img元素

用户代理提供的可获焦子控件,比如input[type=number]生成的上下两个按钮

生成子控件的元素

元素的滚动区域

产生滚动区域的元素

浏览上下文内document的viewport,比如iframe产生的视窗。

为之产生viewport的document

tabindex焦点标记

使用键盘上的tab键,可以按顺序切换当前焦点元素,而影响这个切换顺序的属性就是元素的tabindex属性。这个属性的取值范围是0到32767,如果赋值为负数则表示没有焦点标记,不对它进行切换。

但并不是所有元素设置了tabindex就一定可以使用tab键切换成为焦点,首先tabindex的值不能为负数,而且不能有disabled属性。另外,这个元素必须有对应的可获焦区域,而且支持tabindex属性。HTML4规定FORM表单中只有以下元素支持tabindex属性:a、area、button、input、object、select、textarea。

没有显式设置tabindex属性的元素就不能通过Tab键切换成为焦点?也不是,只要元素拥有tabindex焦点标记就可以。W3C推荐用户代理自动为以下元素设置tabindex焦点标记:

  • 有href属性的a元素;
  • 有href属性的link元素;
  • button元素;
  • type不是hidden的input元素;
  • select元素;
  • textarea元素;
  • iframe、frame元素;
  • menuitem元素;
  • 设置了draggable属性的元素;
  • 设置了contenteditable属性的元素;
  • 默认这些元素的tabindex为0。以上只是W3C推荐的元素,不同的浏览器实现可能不一样。比如在Chrome41中,如果不是上述元素,即使设置了合法的tabindex也不会被tab键切换到,而在IE和Firefox中,只要设置了合法的tabindex就可以被tab切换到。

    切换顺序规则

    由先到后的顺序是:

    1.        元素的tabindex大于0的元素,按tabindex从小到大顺序切换;

    2.        元素的tabindex相同的,按元素在document中的出现顺序切换;

    3.        元素的tabindex为0,或没有设置tabindex,或tabindex不是有效整数(后两种等同于tabindex=0),按元素在document中的出现顺序切换;

    focus & focusin, blur & focusout

    一个元素成为active元素就等于获得了焦点,会触发这个元素的focus事件。有元素获得焦点,一般就有元素会失去焦点,失去焦点的元素触发blur事件。这两个事件几乎是同时发生的,但他们的执行顺序有区别,blur事件的监听方法先执行,然后才是focus事件的监听方法。

    元素在document没有加载完之前是不能获得焦点的,获得焦点的元素通过documnt.activeElement可以访问。

    Focusin也是元素在即将获取焦点的时候触发的事件,它和focus的主要区别是focus事件没有冒泡阶段。因为focusin事件有冒泡阶段,因此可以用来监听本元素及其子元素获取焦点的情况。同理,blur事件也没有冒泡阶段,而focusout有。

    兼容性:

  • Firefox不支持focusin和focusout事件;
  • Chrome,获取焦点执行顺序:onfocus,onfocusin;失去焦点执行顺序:onblur, onfocusout。
  • IE6,IE7,IE8,IE9,IE10,获取焦点执行顺序:onfocusin ,onfocus;失去焦点执行顺序:onfocusout ,onblur。
  • 键盘事件

    在DOM中,有几个键盘事件总是以获得焦点的元素作为目标的。

    Keypress, keydown, keyup的区别

    KeyPress主要用来接收字母、数字等ANSI字符,而 KeyDown 和 KeyUP 事件过程可以处理任何不被KeyPress 识别的击键,诸如:功能键(F1-F12)、编辑键、定位键以及任何这些键和键盘换档键的组合等。

    三个事件的触发顺序按从早到晚:keydown、keypress、keyup。Keydown和keypress事件监听方法执行的时候,刚才敲入的字符还没有显示在输入框中,要等这些事件监听方法执行完后才插入。Keyup事件监听方法执行的时候,字符已经显示在输入框中。

    如果摁住某个键不放,会间隔触发keypress和keydown事件,但只要你不放开,就不会触发keyup,keyup只有当你放开这个键才会触发。


    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板