Home > Web Front-end > JS Tutorial > About JavaScript monitoring key combinations

About JavaScript monitoring key combinations

藏色散人
Release: 2020-07-25 14:39:05
forward
3863 people have browsed it

Recommendation: "javascript introductory tutorial"

1.Thinking

As shown in the figure, by monitoring and printing the keyboard keydown event, the icon content is obtained , Observation found that

When the pressed key combination includes the Ctrl key, the ctrlKey key will be displayed as true;

When the pressed key combination includes the Shift key, or when capitalization is turned on before pressing the key , the shiftkey key will be displayed as true;

When the pressed key combination contains the Alt key, the altKey key will be displayed as true;

When the pressed key combination contains the meta key (Mac computer Above is the [⌘] and command key. If the non-mac computer is the win key

, the metaKey key will be displayed as true

In addition, When a key is pressed, the ascii code of the corresponding key can be obtained through event. Combining this information, the key can be judged

2.​ Code Example

        // 按下键盘事件处理函数
        onKeyDown(event) {
           const keyCode = event.keyCode || event.which || event.charCode; // 有些浏览器除了通过keyCode获取输入键code,还可以通过which,charCode获取,这么写是出于浏览器兼容性考虑
 
 
            const keyCombination = event.ctrlKey ;
 
            if (keyCombination && keyCode == 75) {
                console.log("按下了Ctrl + k键");
            }
        }
Copy after login

The above is the detailed content of About JavaScript monitoring key combinations. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:cnblogs.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template