如何实现仅当所有字段填满时按Enter键提交内容？

没问题，我来帮你搞定这个Enter键提交的功能！首先咱们先优化一下原有的代码逻辑，把验证规则抽成一个可复用的函数，这样不管是激活按钮还是处理Enter键都能共用一套逻辑，避免重复代码。

步骤1：重构验证逻辑为可复用函数 #

先把判断两个字段是否填满的逻辑写成一个独立函数，这样后续不管是键盘输入还是Enter键触发，都能直接调用：

function validateForm() {
  // 获取用户名输入框的值，去除多余空格
  const userName = $("#fname").val().replace(/\s+/g, " ").trim();
  // 获取消息文本框的值，去除多余空格
  const yourMessage = $("#yourMessage").val().replace(/\s+/g, " ").trim();
  
  // 判断两个字段是否都不为空
  const isFormValid = userName !== "" && yourMessage !== "";
  
  // 根据验证结果更新Send按钮的禁用状态
  $("#send").prop("disabled", !isFormValid);
  
  // 返回验证结果，供Enter键逻辑使用
  return isFormValid;
}

步骤2：简化原有的键盘输入监听 #

原来的keyup事件可以直接调用上面的验证函数，代码更简洁：

// 监听用户名和消息框的键盘输入，实时验证表单
$("input[type='text'], textarea").keyup(validateForm);

步骤3：添加Enter键提交逻辑 #

接下来给表单添加键盘按下事件监听，判断是否按下了Enter键，只有当表单验证通过时才执行提交动作：

// 监听表单的键盘按下事件
$("#subscribe").keydown(function(e) {
  // 判断是否按下的是Enter键（keyCode 13，也可以用e.key === 'Enter'）
  if (e.keyCode === 13) {
    // 阻止浏览器默认的表单提交行为（避免不必要的页面刷新）
    e.preventDefault();
    
    // 如果表单验证通过，触发Send按钮的点击事件
    if (validateForm()) {
      $("#send").click();
      // 这里也可以直接写你的提交逻辑，比如AJAX请求，代替按钮点击
    }
  }
});

完整的代码示例 #

把所有代码整合到一起，注意jQuery要放在最前面：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello!</h1>
<form action="" method="post" id="subscribe" name="subscribe">
  First name: <input type="text" name="fname" id="fname" placeholder="Name" autofocus><br>
  <div id="name-message"></div> <!-- 注意：原代码有两个id为message的div，建议重命名避免冲突 -->
  Your Message:<br>
  <textarea typeof="text" id="yourMessage" placeholder="Start Typing..."></textarea><br />
  <input type="button" class="button button-blue" value="Send" name="button" disabled="disabled" id="send" />
</form>
<input type="button" class="button button-blue" value="Click Me!" id="click-me" />
<div id="action-message"></div>

<script>
function validateForm() {
  const userName = $("#fname").val().replace(/\s+/g, " ").trim();
  const yourMessage = $("#yourMessage").val().replace(/\s+/g, " ").trim();
  const isFormValid = userName !== "" && yourMessage !== "";
  
  $("#send").prop("disabled", !isFormValid);
  return isFormValid;
}

$("input[type='text'], textarea").keyup(validateForm);

$("#subscribe").keydown(function(e) {
  if (e.keyCode === 13) {
    e.preventDefault();
    if (validateForm()) {
      $("#send").click();
      // 这里可以添加你的提交逻辑，比如：
      // alert("表单提交成功！");
      // 或者AJAX请求：
      // $.post("your-submit-url", $("#subscribe").serialize(), function(response) { ... });
    }
  }
});

// 如果需要给Send按钮添加点击后的逻辑，可以这样写
$("#send").click(function() {
  // 这里写提交动作，比如发送AJAX或者处理表单数据
  alert("表单已提交！");
});
</script>

小提醒 #

• 我把原代码中重复的id="message"改成了不同的名称，避免DOM元素id冲突，这是前端开发的最佳实践哦。
• 使用prop("disabled", ...)代替attr来控制按钮禁用状态，jQuery中操作表单元素的状态属性用prop更可靠。
• Enter键的判断可以用e.key === 'Enter'代替e.keyCode === 13，后者是旧的API，前者更语义化，不过两者都能正常工作。

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