Events 3 : keyup/keydown

css/styles.css

@@ -230,10 +230,16 @@ a.active {
 .underlined-text {
   text-decoration: underline;
 }
+.text-green {
+  color: #4b2;
+}
+.text-red {
+  color: #b42;
+}
 .table {
   border-collapse: collapse;
 }
 .table tr td {
   border: 1px solid #aaa;
   padding: 2px;
-}
+}

exemples/evenements-3-keyup/contenu.html

@@ -0,0 +1,9 @@
+<h5>Evènements keydown et keyup</h5>
+<p>Plus immédiat que l'évènement change pour un input "text" : l'évènement keyup</p>
+<input type="text" id="events3-text" />
+<ul>
+    <li>Touche pressée/relâchée: <span id="key-name"></span></li>
+    <li>Touche ctrl: <span id="ctrl-status"></span></li>
+    <li>Touche shift: <span id="shift-status"></span></li>
+    <li>Touche alt: <span id="alt-status"></span></li>
+</ul>

exemples/evenements-3-keyup/script.js

@@ -0,0 +1,25 @@
+// Gestion de l'évènement keyup
+var ctrlSt  = $('#ctrl-status');
+var shiftSt = $('#shift-status');
+var altSt   = $('#alt-status');
+var keyName = $('#key-name');
+
+// Ici ça devient intéressant de se pencher sur le contenu de l'objet event
+function onKeyChange(event) {
+    ctrlSt.removeClass()
+    .addClass(event.ctrlKey ? 'text-green' : 'text-red')
+    .html(event.ctrlKey ? 'ON' : 'OFF');
+
+    shiftSt.removeClass()
+    .addClass(event.shiftKey ? 'text-green' : 'text-red')
+    .html(event.shiftKey ? 'ON' : 'OFF');
+
+    altSt.removeClass()
+    .addClass(event.altKey ? 'text-green' : 'text-red')
+    .html(event.altKey ? 'ON' : 'OFF');
+    
+    keyName.html(event.key);
+}
+
+$('#events3-text').keydown(onKeyChange);
+$('#events3-text').keyup(onKeyChange);

exemples/liste.json

@@ -1,10 +1,11 @@
 [
   { "slug": "selecteurs-basiques", "title": "Sélecteurs basiques" },
   { "slug": "selecteurs-multiples", "title": "Sélecteurs multiples" },
-  { "slug": "ajax-requete-randomuserme", "title": "AJAX - Requête randomuser.me" },
-  { "slug": "ajax-requete-themoviedborg", "title": "AJAX - Requête themoviedb.org" },
   { "slug": "selecteurs-filtres", "title": "Sélecteurs : filtres" },
   { "slug": "selecteurs-filtres-2", "title": "Sélecteurs : filtres 2" },
-  { "slug": "evenements-1-click-submit", "title": "Evènements 1 : click et submit" },
-  { "slug": "evenements-2-change", "title": "Evènements 2 : change" }
+  { "slug": "evenements-1", "title": "Evènements 1" },
+  { "slug": "evenements-2", "title": "Evènements 2" },
+  { "slug": "evenements-3-keyup", "title": "Evènements 3 : keyup" },
+  { "slug": "ajax-requete-randomuserme", "title": "AJAX - Requête randomuser.me" },
+  { "slug": "ajax-requete-themoviedborg", "title": "AJAX - Requête themoviedb.org" }
 ]