如何让p5.js画布支持Tab键聚焦访问

• 动态设置tabindex属性：p5.js会在页面加载后自动生成<canvas>元素，静态HTML中提前设置的属性可能被覆盖，需在setup()函数里为生成的画布添加属性：

  function setup() {
    let canvas = createCanvas(400, 400);
    // 让画布具备可聚焦能力
    canvas.elt.setAttribute('tabindex', '0');
    // 可选：页面加载后自动聚焦画布
    // canvas.elt.focus();
  }
  

• 添加聚焦可视化样式：浏览器默认不会给画布添加明显的聚焦高亮，需自定义CSS让聚焦状态可见：

  canvas:focus {
    outline: 2px solid #0066cc; /* 自定义聚焦边框样式 */
    outline-offset: 2px;
  }
  

• 排查焦点顺序与干扰元素：检查页面中其他带tabindex的元素，确保画布的tabindex="0"遵循自然聚焦顺序，避免被高优先级（如tabindex="1"）元素抢占。同时确认没有其他JS代码阻止了焦点事件触发。

• 验证焦点状态：可通过监听焦点事件确认画布是否真正获得焦点：

  function setup() {
    let canvas = createCanvas(400, 400);
    canvas.elt.setAttribute('tabindex', '0');
    
    canvas.elt.addEventListener('focus', () => {
      console.log('画布已获得焦点');
    });
    canvas.elt.addEventListener('blur', () => {
      console.log('画布已失去焦点');
    });
  }
  

内容的提问来源于stack exchange，提问作者Shruti Varghese