HTML focus and keyboard events_html/css_WEB-ITnose

The so-called focus is the object that the user is currently operating, which can be an element or a tab or window in a browser. For example, if you click the input box with the mouse, the input box will become the focus. Using the Tab key on the keyboard, you can move the focus to another element or other area of ​​the browser. You can shift focus and even edit the focused element via both mouse and keyboard.

Focus element

Only one element of a document can be focused at the same time . This focus element can be accessed using JavaScript:

document.activeElement;

If no element has focus, the default is the body element as activeElement. The element that becomes the focus corresponds to the CSS :focus pseudo-class.

But not all elements can be focused. Only DOM anchors with a focusable area can be called focus:

Focusable area

Focusable area It may be an element, part of an element or other part managed by the user agent. Each focusable area has a DOM anchor. This anchor is a Node object. The position of the Node object is the position of the focusable area in the DOM. The focusable area API currently uses this anchor to operate the focusable area.

Not all Nodes can represent the focus area. Some conditions need to be met for a Node to become the focus area. The following table just lists some common focusable areas and their DOM anchors:

可获焦区域	DOM锚
有tabindex焦点标志，并且没有disabled属性的元素	元素本身
Image map中area的图形区域	img元素
用户代理提供的可获焦子控件，比如input[type=number]生成的上下两个按钮	生成子控件的元素
元素的滚动区域	产生滚动区域的元素
浏览上下文内document的viewport，比如iframe产生的视窗。	为之产生viewport的document

Focusable area

DOM anchor

Elements with tabindex focus flag and no disabled attribute

The element itself

The graphic area of ​​the area in the Image map

img element

The focus control provided by the user agent, such as the upper and lower buttons generated by input[type=number]

Generate the element of the child control

The scrolling area of ​​the element

Elements that generate scrolling areas

The viewport of the document in the browsing context, such as the window generated by an iframe.

The document for which the viewport is generated

tabindex focus tag

Use the tab key on the keyboard to switch the currently focused element in order, and the attribute that affects this switching order is the tabindex attribute of the element. The value range of this attribute is 0 to 32767. If the value is negative, it means that there is no focus mark and it will not be switched.

But not all elements with tabindex set can be switched to focus using the tab key. First of all, the value of tabindex cannot be a negative number, and it cannot have the disabled attribute. In addition, this element must have a corresponding focusable area and support the tabindex attribute. HTML4 stipulates that only the following elements in the FORM form support the tabindex attribute: a, area, button, input, object, select, textarea.

Elements that do not have the tabindex attribute explicitly set cannot be switched to focus through the Tab key? No, as long as the element has the tabindex focus tag. W3C recommends that user agents automatically set tabindex focus tags for the following elements:

a elements with href attributes;

link elements with href attributes;

button elements;

Input element whose type is not hidden;

select element;

textarea element;

iframe, frame element;

menuitem element;

Elements with the draggable attribute set;

Elements with the contenteditable attribute set;

The default tabindex of these elements is 0. The above are only elements recommended by W3C, and different browser implementations may be different. For example, in Chrome 41, if it is not the above element, even if a legal tabindex is set, it will not be switched to by the tab key. In IE and Firefox, as long as a legal tabindex is set, it can be switched to by the tab key.

Switching order rules

The order from first to last is:

1. For elements whose tabindex is greater than 0, switch according to the tabindex order from small to large;

2. If the tabindex of the elements is the same, switch according to the order in which the elements appear in the document;

3. The tabindex of the element is 0, or the tabindex is not set, or the tabindex is not a valid integer (the latter two are equivalent (at tabindex=0), switch according to the order in which the elements appear in the document;

focus & focusin, blur & focusout

When an element becomes an active element, it is equivalent to gaining focus, and the focus event of this element will be triggered. If an element gains focus, there will generally be an element that loses focus, and the element that loses focus triggers the blur event. These two events occur almost at the same time, but their execution order is different. The listening method of the blur event is executed first, and then the listening method of the focus event.

The element cannot get focus before the document is loaded . The focused element can be accessed through document.activeElement.

Focusin is also an event triggered when an element is about to gain focus. The main difference between it and focus is that the focus event does not have a bubbling stage. Because the focusin event has a bubbling stage, it can be used to monitor when this element and its sub-elements gain focus. In the same way, the blur event does not have a bubbling stage, but focusout does.

Compatibility:

Firefox does not support focusin and focusout events;

Chrome, the execution order of getting focus: onfocus, onfocusin; the execution order of losing focus: onblur, onfocusout.

IE6, IE7, IE8, IE9, IE10, get focus execution order: onfocusin, onfocus; lose focus execution order: onfocusout, onblur.

Keyboard events

In the DOM, there are several keyboard events that always target the focused element.

The difference between Keypress, keydown and keyup

KeyPress is mainly used to receive ANSI characters such as letters and numbers, while the KeyDown and KeyUP event procedures can handle any keystrokes that are not recognized by KeyPress, such as: Function keys (F1-F12), editing keys, navigation keys, and any combination of these keys and keyboard shift keys, etc.

The three events are triggered in order from morning to night: keydown, keypress, keyup. When the Keydown and keypress event listening methods are executed, the characters just typed have not yet been displayed in the input box. They must be inserted after these event listening methods are executed. When the Keyup event listening method is executed, the characters are already displayed in the input box.

If you press and hold a key, keypress and keydown events will be triggered at intervals, but as long as you don't let go, keyup will not be triggered. Keyup will only occur when you let go of the key. will be triggered.