M

E

N

U

 

 

события клавиатуры

keydown() при нажатии на клавишу клавиатуры
keypress() при нажатии на клавишу клавиатуры
keyup() при отпускании нажатой раннее клавиши клавиатуры
 
 

keydown()

Функция будет выполнена при нажатии на клавишу клавиатуры.
Эта функция срабатывает сразу после нажатия клавиши и позволяет получить код клавиши клавиатуры, который возвращает свойство keyCode объекта event.
Код клавиши клавиатуры будет одинаков при любой раскладке клавиатуры и в любом регистре.
a A ф Ф = 65
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .a {
   height: 300px;
   width: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -150px;
   margin-left: -150px;
   background-color: #3BA9DE;
   color: #FFF;
   border-radius: 50%;
   text-align: center;
   line-height: 300px;
   font-size: 36px;
  }
  #main {
   margin: 20px;
  }
  input {
   padding-left: 5px;
  }
 </style>
</head>
<body>
 <div id="main">
  <label>Press any key</label>
  &nbsp;&nbsp;
  <input type="text" />
  &nbsp;&nbsp;
  <span>Code of the key = </span>
  &nbsp;&nbsp;
  <span id="s1"></span>
 </div>
 
 <script>
  $(document).ready(function () {
   $('input').keydown(function (e) {
    $('#s1').text(e.keyCode); 
    if(e.keyCode == 97) {
     $('body').append('<div class="a">Yes</div>');
    }
    else {
     $('body>div.a').remove();
    }
   });
  });
 </script>
</body>
</html>
 
 
 

keypress()

Функция будет выполнена при нажатии на клавишу клавиатуры.
Эта функция срабатывает сразу после нажатия клавиши и позволяет получить код символа, который возвращает свойство which или свойство charCode объекта event.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .a {
   height: 300px;
   width: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -150px;
   margin-left: -150px;
   background-color: #3BA9DE;
   color: #FFF;
   border-radius: 50%;
   text-align: center;
   line-height: 300px;
   font-size: 36px;
  }
  #main {
   margin: 20px;
  }
  input {
   padding-left: 5px;
  }
 </style>
</head>
<body>
 <div id="main">
  <label>Press any symbol</label>
  &nbsp;&nbsp;
  <input type="text" />
  &nbsp;&nbsp;
  <span>Code of the symbol = </span>
  &nbsp;&nbsp;
  <span id="s1"></span>
 </div>
 
 <script>
  $(document).ready(function () {
   $('input').keypress(function (e) {
    $('#s1').text(e.which);
    if(e.which == 97) {
     $('body').append('<div class="a">Yes</div>');
    }
    else {
     $('body>div.a').remove();
    }
   });
  });
 </script>
</body>
</html>
 
 
 

keyup()

Функция будет выполнена при отпускании нажатой раннее клавиши клавиатуры.
Эта функция срабатывает сразу после отпускания клавиши и позволяет получить код клавиши клавиатуры, который возвращает свойство keyCode объекта event.
Код клавиши клавиатуры будет одинаков при любой раскладке клавиатуры и в любом регистре.
a A ф Ф = 65
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  .a {
   height: 300px;
   width: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -150px;
   margin-left: -150px;
   background-color: #3BA9DE;
   color: #FFF;
   border-radius: 50%;
   text-align: center;
   line-height: 300px;
   font-size: 36px;
  }
  #main {
   margin: 20px;
  }
  input {
   padding-left: 5px;
  }
 </style>
</head>
<body>
 <div id="main">
  <label>Press any key</label>
  &nbsp;&nbsp;
  <input type="text" />
  &nbsp;&nbsp;
  <span>Code of the key = </span>
  &nbsp;&nbsp;
  <span id="s1"></span>
 </div>
 
 <script>
  $(document).ready(function () {
   $('input').keyup(function (e) {
    $('#s1').text(e.keyCode); 
    if(e.keyCode == 97) {
     $('body').append('<div class="a">Yes</div>');
    }
    else {
     $('body>div.a').remove();
    }
   });
  });
 </script>
</body>
</html>