Symbolab矩阵输入功能实现方式及所用HTML组件技术问询

Hey Jeremy，作为HTML新手想复刻这个功能完全没问题，咱们一步步拆解Symbolab的实现思路：

核心组件说明 #

先明确你关心的两个关键问题：

• 矩阵容器不是Canvas：Canvas是用于绘图的，没法直接支持输入、选中这类交互操作。Symbolab的矩阵区域是用普通HTML元素（div容器 + input输入框）组合出来的，这样才能满足用户编辑内容的核心需求。
• 矩阵单元格就是input type="text"：每个矩阵格子都是独立的单行文本输入框，通过CSS样式调整成紧凑的单元格形态，让整体视觉上呈现出矩阵的连贯感。

实现步骤拆解 #

1. 自定义矩阵尺寸的交互 #

首先做一个简单的尺寸选择区域：

• 放两个input type="number"输入框，分别让用户输入行数和列数；
• 搭配一个确认按钮，点击后触发JS逻辑，根据用户输入的行列数动态生成对应的矩阵单元格。

示例代码片段：

<!-- 尺寸选择区 -->
<div class="matrix-size">
  <input type="number" id="rows" min="1" value="2">
  <span>×</span>
  <input type="number" id="cols" min="1" value="2">
  <button onclick="generateMatrix()">生成矩阵</button>
</div>

<!-- 矩阵容器 -->
<div id="matrix-container"></div>

2. 动态生成矩阵输入框 #

用JavaScript根据行列数循环创建input元素，再用CSS布局让它们整齐排列：

• 用CSS Grid布局最省心，给容器设置grid-template-columns: repeat(列数, 1fr)，就能自动把输入框排成对应列数的网格；
• 给每个输入框设置统一样式：固定/自适应宽度、边框、文本居中，去掉默认输入框的高亮、圆角等样式，让整体看起来像一个完整的矩阵。

示例JS+CSS：

function generateMatrix() {
  const rows = parseInt(document.getElementById('rows').value);
  const cols = parseInt(document.getElementById('cols').value);
  const container = document.getElementById('matrix-container');
  
  // 清空容器
  container.innerHTML = '';
  // 设置Grid布局列数
  container.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
  
  // 循环生成每个单元格
  for (let i = 0; i < rows * cols; i++) {
    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'matrix-cell';
    // 可选：添加键盘导航，按箭头/Tab键切换单元格
    input.addEventListener('keydown', handleKeyNavigation);
    container.appendChild(input);
  }
}

function handleKeyNavigation(e) {
  const cells = document.querySelectorAll('.matrix-cell');
  const currentIndex = Array.from(cells).indexOf(e.target);
  const cols = parseInt(document.getElementById('cols').value);
  
  switch(e.key) {
    case 'ArrowRight':
      e.preventDefault();
      cells[currentIndex + 1]?.focus();
      break;
    case 'ArrowLeft':
      e.preventDefault();
      cells[currentIndex - 1]?.focus();
      break;
    case 'ArrowDown':
      e.preventDefault();
      cells[currentIndex + cols]?.focus();
      break;
    case 'ArrowUp':
      e.preventDefault();
      cells[currentIndex - cols]?.focus();
      break;
  }
}

#matrix-container {
  display: grid;
  gap: 0; /* 去掉单元格间距 */
  margin-top: 10px;
}

.matrix-cell {
  width: 60px;
  height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 0; /* 去掉默认圆角 */
}

/* 处理边框重复问题，让矩阵更连贯 */
.matrix-cell:not(:nth-child(-n+2)) {
  border-top: none;
}
.matrix-cell:not(:nth-child(2n)) {
  border-right: none;
}

3. 输入时的动态调整实现 #

Symbolab里输入时的动态效果主要靠这几点实现：

• 内容自适应宽度：监听input事件，用scrollWidth获取内容实际宽度，再调整输入框宽度：

  input.addEventListener('input', function() {
    this.style.width = `${this.scrollWidth + 10}px`; // 加10px留白避免内容溢出
  });
  

• 输入内容验证：限制只能输入数字、正负号、小数点这些矩阵允许的字符，过滤非法输入：

  input.addEventListener('input', function() {
    this.value = this.value.replace(/[^0-9\-.]/g, '');
  });
  

• 自动聚焦下一个单元格：监听keydown事件，当用户按Enter键时自动聚焦到下一个单元格，提升输入效率。

总结 #

核心就是用HTML的input元素做单元格，CSS布局实现矩阵外观，JavaScript处理动态生成、交互逻辑和输入反馈。作为新手可以先从基础的生成矩阵开始，再逐步添加键盘导航、内容验证这些增强功能，慢慢迭代完善~

内容的提问来源于stack exchange，提问作者Jeremy Watts