Home > Web Front-end > JS Tutorial > body text

A simple explanation of keyboard events in js

怪我咯
Release: 2017-07-06 11:36:46
Original
1760 people have browsed it

This article mainly introduces the keyboard events in js, and analyzes the operation skills of js in response to keyboard events in the form of a relatively simple example. Friends in need can refer to the following

This article analyzes the keyboard in js with an example event. Share it with everyone for your reference. The specific analysis is as follows:

The effect of this example:

Press any key on the keyboard to pop up the corresponding ASCII code, compatible with IE, chrome and firefox.

But there are still many problems:

(1) In IE and Chrome, some keys have no effect, such as up, down, left, right, etc.;
(2) In Firefox The right arrow key, and the single quote key, are both 39.

The specific code is as follows:

The code is as follows:

<html>
<head>
<script type="text/javascript">
 window.onload = function(){
  var bd = document.getElementsByTagName(&#39;body&#39;)[0];
  bd.onkeypress = function(ev){
   ev = ev || window.event;//ie不支持function参数ev
   alert(ev.keyCode || ev.which);//火狐不支持keyCode
  }
 }
</script>
<style type="text/css">
#par{width:300px;height:200px;background:gray;}
#son{width:200px;height:100px;background:green;}
</style>
</head>
<body>
<p id="par">
 <p id="son"></p>
</p>
</body>
</html>
Copy after login

The above is the detailed content of A simple explanation of keyboard events in js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!