Flask答题应用：实现无需点击输入框即可输入答案的方案咨询

嗨，这个需求很好解决——我们只需要让输入框在页面加载完成后自动获得焦点，玩家就能直接输入答案，不用额外点击啦！给你两种简单的实现方式：

方法1：使用HTML5原生的autofocus属性（最简便） #

直接在你的<input>标签里添加autofocus属性就行，这是HTML5内置的功能，不用写额外脚本：

修改后的表单代码如下：

{% extends "layout.html" %} 
{% block body %} 
<ul class="list-group list-group-flush">
  <form action="{{url_for('judge',id=answer) }}" method=post>
    <li>{{question}}
      <input type="text" class="form-control" id="InputTitle" name="answer" size="5.5px" autocomplete="off" autofocus>
      <button type="submit" class="btn btn-primary">Submit</button>
    </li>
  </form>
</ul> 
{% endblock %}

这个属性会让浏览器在页面加载完成后，自动把焦点定位到这个输入框上，完美适配你的需求~

方法2：使用JavaScript手动触发焦点（更灵活） #

如果你的页面有动态渲染内容的场景，或者需要更精细的控制（比如延迟聚焦），可以用JavaScript来实现：

在{% block body %}的末尾添加一段脚本：

{% extends "layout.html" %} 
{% block body %} 
<ul class="list-group list-group-flush">
  <form action="{{url_for('judge',id=answer) }}" method=post>
    <li>{{question}}
      <input type="text" class="form-control" id="InputTitle" name="answer" size="5.5px" autocomplete="off">
      <button type="submit" class="btn btn-primary">Submit</button>
    </li>
  </form>
</ul>

<script>
// 等待DOM完全加载后再执行
document.addEventListener('DOMContentLoaded', function() {
  // 通过ID获取输入框元素，触发焦点
  const answerInput = document.getElementById('InputTitle');
  if (answerInput) {
    answerInput.focus();
  }
});
</script>
{% endblock %}

这种方法的好处是，即使输入框是后续动态生成的（比如用AJAX加载），只要确保脚本在元素存在后执行，就能正常生效。

小提示 #

如果页面上有多个输入框，autofocus只会对第一个带有该属性的元素生效，所以你的场景里只用一次就够啦~

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