PM 說: 可以用網頁實現機上盒的 App 操作 UI 嗎?

2024 iThome 鐵人賽

DAY 25

JavaScript

PM說: RD大大，這個功能要怎麼寫啊?系列第 25 篇

16th鐵人賽

YUAN

2024-09-22 21:18:42

99 瀏覽

分享至

前言

現在智慧電視越來越普遍
封面圖是智慧電視的作業系統UI

標題說的機上盒英文是 set-top box (STB)
=>可理解成它是一台小小電腦(普遍都是安裝類似 Android 的作業系統)
可以安裝 Netflix, 愛奇藝, Disney+, Youtube ...etc 看影片的應用程式

在上面都是使用遙控器來操作UI，和一般網頁操作邏輯差很多的!
基本上不太會看到需要填表單的功能(試想在一個沒有語音功能的遙控器上填寫資料...)

今天來做2個demo

在網頁上模擬遙控器操作(使用鍵盤)
focus 效果

成果

demo1 電腦網頁用方向鍵控制UI
可以看到下圖有兩個框框

黑色: 在鍵盤按下tab會選到畫面上第一個DOM元素，而button預設focus是黑色
紅色: 這個是點了鍵盤方向鍵後透過keydown事件判斷選了哪個按鈕，加上class來改變顏色

demo2 網頁UI被選取的效果

//認識基本規則
1.對網頁按下 tab 鍵 => 抓取第一個DOM => 出現focus效果
2.遙控器方向鍵
    - 右: 相當於按下 `tab` => 抓同列的下個DOM => 出現focus效果
    - 左: 相當於按下 `shift` + `tab` => 抓同列的上個DOM => 出現focus效果
    - 下: 抓下一列DOM的第一個 => 出現focus效果
    - 上: 抓上一列DOM的第一個 => 出現focus效果

改顏色只要規範好focus的border即可產生效果

      button:focus {
        border: 10px solid rgb(255, 153, 0);
      }

補充範例1重點

宣告一個currentFocusIndex紀錄當前位置在哪
透過keydown事件監聽鍵盤，處理方式如下

移除 focus 的className focused
當為上下左右時算出currentFocusIndex，改值
並給予正確的DOM元素 focused

buttons[currentFocusIndex].classList.add("focused");

程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TV</title>
    <style>
      .focusable-button {
        padding: 70px;
        margin: 15px;
        background-color: #333;
        color: #fff;
        border: 2px solid transparent;
        font-size: 10rem;
        border: 10px solid #ffffff;
      }

      .focusable-button.focused {
        border: 10px solid #f00;
      }
    </style>
  </head>
  <body>
    <h2>方向鍵選擇 DOM</h2>
    <pre>
      請用電腦版測試，按下鍵盤方向鍵
  </pre>    
    <button class="focusable-button" onclick="alert(1)">1</button>
    <button class="focusable-button" onclick="alert(2)">2</button>
    <button class="focusable-button" onclick="alert(3)">3</button>
    <br />
    <button class="focusable-button" onclick="alert(4)">4</button>
    <button class="focusable-button" onclick="alert(5)">5</button>
    <button class="focusable-button" onclick="alert(6)">6</button>

    <script>
      let currentFocusIndex = 0;
      const buttons = document.querySelectorAll(".focusable-button");
      main();

      function main() {
        document.addEventListener("keydown", function (event) {
          switch (event.key) {
            case "ArrowUp":
              // 處理上方向鍵的邏輯
              moveFocus("up");
              break;
            case "ArrowDown":
              // 處理下方向鍵的邏輯
              moveFocus("down");
              break;
            case "ArrowLeft":
              // 處理左方向鍵的邏輯
              moveFocus("left");
              break;
            case "ArrowRight":
              // 處理右方向鍵的邏輯
              moveFocus("right");
              break;
            case "Enter":
              // 處理確認鍵邏輯 (選中當前焦點元素)
              activateButton();
              break;
          }
        });
      }

      function moveFocus(direction) {
        buttons[currentFocusIndex].classList.remove("focused");

        switch (direction) {
          case "up":
            if (currentFocusIndex >= 3 && currentFocusIndex <= 5) {
              currentFocusIndex -= 3;
            }
            break;
          case "down":
            if (currentFocusIndex <= 2 && currentFocusIndex >= 0) {
              currentFocusIndex += 3;
            }
            break;
          case "left":
            currentFocusIndex = Math.max(currentFocusIndex - 1, 0);
            break;
          case "right":
            currentFocusIndex = Math.min(
              currentFocusIndex + 1,
              buttons.length - 1
            );
            break;
        }

        buttons[currentFocusIndex].classList.add("focused");
      }

      function activateButton() {
        buttons[currentFocusIndex].click();
      }
    </script>
  </body>
</html>