event.keyCode

javascript

event.keyCodeで押されたキーのキーコードを取得できるので、さっき作ったやつにショートカットキーを追加してみた。

Index: setinterval.html
===================================================================
--- setinterval.html	(revision 18)
+++ setinterval.html	(working copy)
@@ -1,6 +1,6 @@
 <html>
 <head>
-<title>setInterval</title>
+<title>setInterval / clearInterval / keyCode</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
 <script language="javascript">
 <!--
@@ -23,14 +23,26 @@
 var timer;
 var isSliding;
 
-function nextImage(image, caption) {
-    if ( index >= myImages.length ) {
+function setImage(image, caption) {
+    if ( index < 0 ) {
+        index = myImages.length - 1;
+    } else if ( index >= myImages.length ) {
         index = 0;
     }
     document.getElementById(caption).innerHTML = myImages[index];
-    document.getElementById(image).src = myImages[index++];
+    document.getElementById(image).src = myImages[index];
 }
 
+function nextImage(image, caption) {
+    ++index;
+    setImage(image, caption);
+}
+
+function previousImage(image, caption) {
+    --index;
+    setImage(image, caption);
+}
+
 function startSlideShow() {
     timer = setInterval( "nextImage('imageBox', 'imageBoxCaption')", intervalTime );
     isSliding = 1;
@@ -69,6 +81,22 @@
     setIntervalTime(1000);
     startSlideShow();
 }
+
+document.onkeydown = function(event) {
+    var code = event.keyCode;
+    // 74:j
+    // 75:k
+    // 78:n
+    // 80:p
+    if ( code == 74 || code == 78 ) {
+        nextImage('imageBox', 'imageBoxCaption');
+    } else if ( code == 75 || code == 80 ) {
+        previousImage('imageBox', 'imageBoxCaption');
+    }
+
+    event.stopPropagation();
+}
+
 // -->
 </script>
 </head>
@@ -81,10 +109,19 @@
 <input type="submit" name="submit" value="変更する">
 </form>
 
+<p>
+以下のショートカットキーが使えます。<br>
+n, j : 次の画像<br>
+k, p : 前の画像<br>
+</p>
+<p>
 [<a href="javascript:toggleSlideShow()" id="slideState"></a>]
+</p>
+
 <p>
 <img src="" id="imageBox" border="0" />
 <div id="imageBoxCaption"></div>
-</script>
+</p>
+
 </body>
-</html>
? No newline at end of file
+</html>

SafariStandを使ってると文字を入力しただけで検索モードに入るのですが、onkeydownのなかでstopPropagation()してやると検索モードに入らずに済むようです。