使用JavaScript实现问卷按钮显隐、禁止空回答按ENTER跳转的问题

以下代码可同时满足你提出的4条规则：

代码内容 #

<!-- 输入框区域 -->
<input 
  required 
  type="text" 
  name="idade_aluno_lp" 
  id="idade_aluno_lp" 
  placeholder="Digite a idade do aluno" 
  maxlength="2"
  onkeypress="return justNumbers(event)"
  oninput="checkInput()"
  onkeydown="blockEmptyEnter(event)"
/>

<div class="text-end mt-3">
  <input 
    type="submit" 
    id="submit2" 
    class="btn btn-primary btn-lg" 
    value="Enviar Resposta" 
    style="display: none;" 
  />
</div>

<script type="text/javascript">
// 规则1：仅允许输入0-9的数字
function justNumbers(evt) {
  const key = evt.keyCode || evt.which;
  return key >= 48 && key <= 57;
}

// 规则2：空输入时按下回车无法提交
function blockEmptyEnter(evt) {
  const input = document.getElementById('idade_aluno_lp');
  if (evt.keyCode === 13 && input.value.trim().length === 0) {
    evt.preventDefault();
    return false;
  }
}

// 规则3、4：实时检查输入内容控制按钮显隐
function checkInput() {
  const input = document.getElementById('idade_aluno_lp');
  const submitBtn = document.getElementById('submit2');
  // 如需至少2位数字才显示按钮，将下方>=1改为>=2即可
  submitBtn.style.display = input.value.trim().length >= 1 ? 'block' : 'none';
}

// 兼容浏览器自动填充场景，页面加载完成后主动检查一次输入状态
document.addEventListener('DOMContentLoaded', checkInput);

// 可选增强：拦截粘贴操作，禁止粘贴非数字内容
document.getElementById('idade_aluno_lp').addEventListener('paste', function(e) {
  const pasteContent = (e.clipboardData || window.clipboardData).getData('text');
  if (!/^\d*$/.test(pasteContent)) {
    e.preventDefault();
  }
});
</script>

逻辑说明 #

• 数字过滤通过keypress事件实现，额外增加粘贴拦截避免非数字内容被粘贴进输入框
• 空值回车拦截通过单独绑定keydown事件实现，按下回车时先校验输入内容再决定是否放行
• 输入状态检查绑定input事件，不管是手动输入、删除内容、浏览器自动填充都能触发校验
• 页面加载完成后主动触发一次校验，处理页面刚加载就有浏览器预填内容的场景

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