如何在不使用id的情况下获取选中输入框的value值

嘿，这个需求完全可以实现！不用再挨个写ID判断，我们可以利用浏览器的焦点元素API来精准定位当前选中的输入框，下面一步步给你讲怎么做：

核心思路 #

用document.activeElement获取当前页面中获得焦点的元素，也就是你选中的那个输入框，然后直接对它进行值的校验——这样不管哪个输入框被选中，点击检查按钮都能精准处理。

具体实现步骤 #

1. 优化输入框的属性（推荐做法） #

首先给每个输入框加一个自定义属性data-correct，用来存储对应的正确音符值。比起用placeholder或默认value，这个属性专门存校验用的正确值，逻辑更清晰也不容易混淆：

<input type="text" id="fst" data-correct="12" placeholder="请输入第一个音符">
<input type="text" id="scnd" data-correct="9" placeholder="请输入第二个音符">
<!-- 其他输入框同理添加data-correct属性 -->

2. 重写检查按钮的函数 #

替换你原来的show1other函数，改成针对选中输入框的校验逻辑：

function showfirst() {
  document.getElementById("fst").value = "12";
}

function checkSelectedInput() {
  // 获取当前聚焦的元素
  const activeInput = document.activeElement;
  
  // 先判断是不是文本输入框，避免点击按钮本身或其他元素时出错
  if (activeInput.tagName === 'INPUT' && activeInput.type === 'text') {
    const userInput = activeInput.value.trim();
    // 从自定义属性里取正确值
    const correctValue = activeInput.dataset.correct;
    
    if (userInput === correctValue) {
      // 正确：保留值，还可以加个视觉反馈比如绿色边框
      activeInput.style.borderColor = '#2ecc71';
    } else {
      // 错误：清空输入框，加红色边框提示，并且重新聚焦方便用户输入
      activeInput.value = '';
      activeInput.style.borderColor = '#e74c3c';
      activeInput.focus();
    }
  }
}

3. 绑定函数到按钮 #

把检查按钮的onclick事件改成调用新函数：

<button onclick="checkSelectedInput()">检查当前输入</button>

如果你坚持要用placeholder对比 #

如果一定要用placeholder来做校验（虽然不推荐，因为placeholder是给用户的提示文本，可能和正确值无关），只需要把上面代码里的correctValue替换成：

const correctValue = activeInput.placeholder;

不过还是建议用data-correct，这样逻辑更清晰，也不会影响用户看到的提示内容。

这样修改后，你点击检查按钮时，就只会校验当前选中的那个输入框啦，不用再挨个写ID判断，扩展性也更好——后面加新的输入框，只要加上data-correct属性就行，不用改JS代码~

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