Изучаем jQuery. Часть 8.2 События
Доброго времени суток. Мы продолжаем изучать jQuery, а точнее события в jQuery. Так мы с Вами уже рассмотрели события связанные с мышкой «Изучаем jQuery. Часть 8.1 События». А в этой статье мы остановимся событиях связанных с клавиатурой.
jQuery у нас подключен к проекту, если Вы не знаете как это сделать, то Вам поможет статья «Изучаем jQuery. Часть 1. Подключение jQuery». Ну, что ж приступим.
И первое событие, которое связано с клавиатурой — это событие нажатой клавиши.
Событие keydown()
Событие keydown() возникает в момент когда нажата (но не отпущена) клавиша на клавиатуре.
Рассмотрим следующий html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example"> <input type="text" size="40" id="text"> </div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Теперь, когда в поле input с id=»text» мы нжмем клавишу на клавиатуре появилось сообщение с кодом этой клавиши.
Для этого в наш файл со скриптами добавим следующий код:
$(function(){
$('#text').keydown(function(eventObject){
alert('Нажата клавиша - ' + eventObject.which);
});
});
Давайте посмотрим, что получилось.
Событие keyup()
Событие keyup() возникает, когда нажатая клавиша на клавиатуре отпущена.
Рассмотрим выше приведенный html-код. Теперь, когда мы отпускаем клавишу на клавиатуре в поле input с id=»text» появилось сообщение с кодом этой клавиши. Для этого в наш файл скриптов добавим следующий код:
$(function(){
$('#text').keyup(function(eventObject){
alert('Вы отпустили клавишу - ' + eventObject.which);
});
});
Смотрим, что получилось.
Событие keypress()
Событие keypress() возникает, когда мы вводим символ с клавиатуры.
Рассмотрим html-код приведенный выше. Теперь мы хотим, чтобы вводе в input с id=»text» какого либо текста у нас поменялся фон элемента div с id=»example». Как Вы помните за изменение css стилей отвечает метод jQuery — css. Данный метод описан в статье «Изучаем jQuery. Часть 7.3 Методы манипуляции над элементами». Для этого добавим в наш файл скриптов следующий код:
$(function(){
$('#text').keypress(function(){
$('#example').css({'background-color': '#EEEEEE'});
});
});
Смотрим:
Мы с Вами разобрали три основных события jQuery, которые возникают при работе с клавиатурой.
