Flask网页按钮焦点优化：实现每行按钮独立显示focus状态

问题描述 #

开发Rh血型基因型分析器时，使用按钮收集5组变量（D/C/E/c/e）的输入，但当前仅能有一个按钮保持focus状态，无法让用户同时看到每组的选中选项，需要实现每行按钮独立的选中状态。

解决方案 #

原生focus状态是浏览器全局唯一的，无法同时给多个元素设置，因此改用自定义选中类来模拟每组按钮的选中状态，具体修改如下：

1. 修改JavaScript函数 #

更新setValue函数，实现点击按钮时切换本组内的选中状态，并更新隐藏输入框的值：

function setValue(inputId, value, button) {
  // 获取当前变量组的所有按钮
  const groupButtons = document.querySelectorAll(`button[onclick*="setValue('${inputId}'"]`);
  // 移除本组所有按钮的选中类
  groupButtons.forEach(btn => btn.classList.remove('selected'));
  // 给当前点击的按钮添加选中类
  button.classList.add('selected');
  // 更新对应隐藏输入框的值
  document.getElementById(inputId + '_input').value = value;
}

2. 调整CSS样式 #

添加自定义selected类的样式，复用原focus的样式保持视觉一致性：

body {
  width: 35em;
  margin: 0 auto;
  font-family: Tahoma, Verdana, Arial, sans-serif;
}

.button {
  align-self: center;
  background-color: #fff;
  background-image: none;
  background-position: 0 90%;
  background-repeat: repeat no-repeat;
  background-size: 4px 3px;
  border-radius: 15px 225px 255px 15px 15px 255px 225px 15px;
  border-style: solid;
  border-width: 2px;
  box-shadow: rgba(0, 0, 0, .2) 15px 28px 25px -18px;
  box-sizing: border-box;
  color: #41403e;
  cursor: pointer;
  display: inline-block;
  font-family: Neucha, sans-serif;
  font-size: 1rem;
  line-height: 23px;
  outline: none;
  padding: .75rem;
  text-decoration: none;
  transition: all 235ms ease-in-out;
  border-bottom-left-radius: 15px 255px;
  border-bottom-right-radius: 225px 15px;
  border-top-left-radius: 255px 15px;
  border-top-right-radius: 15px 225px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button:hover {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 8px -5px;
  transform: translate3d(0, 2px, 0);
}

/* 自定义选中状态，与focus样式一致 */
.button:focus, .button.selected {
  box-shadow: rgba(0, 0, 0, .3) 2px 8px 4px -6px;
}

3. 优化HTML结构（可选） #

给每组按钮添加容器，让结构更清晰，便于后续维护：

<h1>Rhesus Genotype Analyzer</h1>
<form method="POST" action="/">
  <div class="input-group">
    <label for="D">D:</label>
    <button type="button" class="button" onclick="setValue('D', 'pos', this)">Pos</button>
    <button type="button" class="button" onclick="setValue('D', 'neg', this)">Neg</button>
  </div>
  <br>

  <div class="input-group">
    <label for="C">C:</label>
    <button type="button" class="button" onclick="setValue('C', 'pos', this)">Pos</button>
    <button type="button" class="button" onclick="setValue('C', 'neg', this)">Neg</button>
  </div>
  <br>

  <div class="input-group">
    <label for="E">E:</label>
    <button type="button" class="button" onclick="setValue('E', 'pos', this)">Pos</button>
    <button type="button" class="button" onclick="setValue('E', 'neg', this)">Neg</button>
  </div>
  <br>

  <div class="input-group">
    <label for="c">c:</label>
    <button type="button" class="button" onclick="setValue('c', 'pos', this)">Pos</button>
    <button type="button" class="button" onclick="setValue('c', 'neg', this)">Neg</button>
  </div>
  <br>

  <div class="input-group">
    <label for="e">e:</label>
    <button type="button" class="button" onclick="setValue('e', 'pos', this)">Pos</button>
    <button type="button" class="button" onclick="setValue('e', 'neg', this)">Neg</button>
  </div>
  <br>

  <input type="hidden" id="D_input" name="D">
  <input type="hidden" id="C_input" name="C">
  <input type="hidden" id="E_input" name="E">
  <input type="hidden" id="c_input" name="c">
  <input type="hidden" id="e_input" name="e">

  <input type="submit" value="Submit">
</form>

效果说明 #

修改后，每组按钮中的选中项会保持自定义的选中样式，不同组的选中状态互不干扰，用户可以清晰看到每个变量的选择结果。

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