Изучаем jQuery. Часть 8.2 События

Ромчик
0

Уроки по jQuery

Доброго времени суток. Мы продолжаем изучать 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, которые возникают при работе с клавиатурой.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2017 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика