仅当所有字段都已满时，如何在按 "Enter" 时接受值？

Question

所以我有这段代码可以接受 2 个字段 "userNAme" 和 "yourMessage"。 "Send" 按钮只有在两个字段都填满时才会激活。

$("input[type='text'],textarea").keyup(function() {
  var text = ($(this).val()).toString();
  text = text.replace(/\s+/g, " ").trim();
  var message = ($("textarea").val()).toString();
  message = message.replace(/\s+/g, " ").trim();
  if (text != "" && message != "") {
    $('input[type="button"]').removeAttr('disabled');
  } else {
    $("#send").attr('disabled', 'disabled');

  }
});

<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="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="message"></div>

但现在我想添加 "Enter" 按键输入值的功能。我希望它像 "Send" 按钮一样工作，即只有在所有字段都已填满时才工作。怎么办？

Answer 1

如果您在单击“提交”或按回车键时将 required 属性添加到 input 标记中，则所有字段都必须已经完成才能提交。

例如：

<input type="text" name="fname" id="fname" placeholder="Name" required autofocus>

Answer 2

如果您要使用类型为 submit 的 button，只要禁用该按钮，就不会通过按回车键提交表单，如下所示

$("input[type='text'],textarea").keyup(function() {
  var text = ($(this).val()).toString();
  text = text.replace(/\s+/g, " ").trim();
  var message = ($("textarea").val()).toString();
  message = message.replace(/\s+/g, " ").trim();
  if (text != "" && message != "") {
    $('button[type="submit"]').removeAttr('disabled');
  } else {
    $("#send").attr('disabled', 'disabled');

  }
});

<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="message"></div>
  Your Message:<br>
  <textarea typeof="text" id="yourMessage" placeholder="Start Typing..."></textarea><br />
  <button type="submit" class="button button-blue" name="button" disabled="disabled" id="send">Send</button>
</form>
<input type="button" class="button button-blue" value="Click Me!" id="click-me" />
<div id="message"></div>

仅当所有字段都已满时，如何在按 "Enter" 时接受值？

How to accept values on pressing "Enter" only if all fields are full?

html

javascript

jquery

keyboard-events