如何添加键盘功能？及为已创建的翻页书实现键盘翻页？

Hey there! Let's break down your questions step by step, with a focus on getting keyboard controls set up—especially for your existing News-Book flipbook.

1. 通用：如何为网页应用添加键盘功能？ #

Adding keyboard functionality to a web app follows a straightforward workflow:

• Listen for keyboard events: Use document.addEventListener() to catch keydown or keyup events (we usually use keydown for instant feedback). Example:

  document.addEventListener('keydown', function(e) {
    // Your key handling logic goes here
  });
  

• Identify specific keys: Use the event object's key property (the modern, preferred method) to detect which key was pressed—like 'ArrowLeft', 'ArrowRight', or 'Escape'. Avoid the deprecated keyCode property.
• Bind to your app's functions: Link the detected key presses to the actions you want to trigger (e.g., navigating pages, opening menus).
• Prevent unwanted default behavior: If your key press conflicts with a browser's default action (like scrolling the page when pressing arrow keys), use e.preventDefault() to override it.

2. 针对你的News-Book翻页书添加键盘翻页功能 #

Since you already have a working flipbook, we just need to hook up keyboard events to your existing page-turning logic. Here's how:

1. Locate your existing page-turn functions: First, check your project's JavaScript code to find the functions that handle page navigation when users click the flip buttons. These might be named something like prevPage(), nextPage(), flipLeft(), or flipRight(). For example, if your flip buttons are bound like this:

   document.querySelector('.prev-button').addEventListener('click', prevPage);
   document.querySelector('.next-button').addEventListener('click', nextPage);
   

   Then prevPage and nextPage are the functions we need.
2. Add the keyboard event listener: Insert this code into your main JS file (or a relevant script):

   document.addEventListener('keydown', function(e) {
     // Left arrow key: Go to previous page
     if (e.key === 'ArrowLeft') {
       e.preventDefault(); // Stop the browser from scrolling left
       prevPage(); // Call your existing previous page function
     }
     // Right arrow key: Go to next page
     else if (e.key === 'ArrowRight') {
       e.preventDefault(); // Stop the browser from scrolling right
       nextPage(); // Call your existing next page function
     }
   });
   

3. Adjust to match your actual function names: Replace prevPage() and nextPage() with the exact function names used in your News-Book project if they're different.
4. Test it out: Save your changes, open your flipbook preview, and press the left/right arrow keys—you should see the pages flip just like when clicking the buttons! If something doesn't work, check your browser's console for errors (like typos in function names).

内容的提问来源于stack exchange，提问作者Anantha Vijay