如何等待用户在 J-Query 文本字段中按下回车键？答案

【问题标题】：How to wait for user to press enter key in J-Query Text field?如何等待用户在 J-Query 文本字段中按下回车键？
【发布时间】：2021-06-02 19:23:05
【问题描述】：

我想在我的文本字段上添加验证，也就是说，在填写文本字段后，用户将按下回车键并且该文本应添加到列表中，如果文本字段为空或用户按下错误的键将以任何形式显示和错误。但是在输入过程中开始显示错误，不等待用户按下回车键。

$(function(){
    $("#enterBtn").click(handleBindingsOnClick);
    $("#input").keyup(handleBindingsOnPress);
});
function handleBindings(){
    var newtodo = $("#input").val();
    $("#todos").append("<li>"+ newtodo +"</li>");
    $("#input").val("");
}
function handleBindingsOnClick(){
    if($("#input").val() != ""){
        handleBindings();
    }
}
function handleBindingsOnPress(event){
    if(event.keyCode === 13 && $("#input").val() != ""){
        handleBindings();
    }
    else{
        alert("Please press enter key or fill the field");
    }
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="text" placeholder="Enter your Text" />
<button id="enterBtn">Enter</button>
<ul id="todos">
   <li>Cricket</li>
   <li>CC</li>
   <li>Web</li>
</ul>

【问题讨论】：

标签： javascript jquery web html-lists backend

【解决方案1】：

你可以写else if见下面的代码

function handleBindingsOnPress(event){
  if(event.keyCode === 13 && $("#input").val() != ""){
      handleBindings();
  }
  else if(event.keyCode === 13 && $("#input").val() === ""){
      alert("Please press enter key or fill the field");
  }

见https://jsfiddle.net/sq4L1t67/

$(function(){
$("#enterBtn").click(handleBindingsOnClick);
$("#input").keyup(handleBindingsOnPress);
});
function handleBindings(){
var newtodo = $("#input").val();
$("#todos").append("<li>"+ newtodo +"</li>");
$("#input").val("");
}
function handleBindingsOnClick(){
if($("#input").val() != ""){
    handleBindings();
}
}
function handleBindingsOnPress(event){
  if(event.keyCode === 13 && $("#input").val() != ""){
      handleBindings();
  }
  else if(event.keyCode === 13 && $("#input").val() === ""){
      alert("Please press enter key or fill the field");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="text" placeholder="Enter your Text" />
<button id="enterBtn">Enter</button>
<ul id="todos">
  <li>Cricket</li>
  <li>CC</li>
  <li>Web</li>
</ul>

【讨论】：

【解决方案2】：

您需要为此使用 JS keydown 事件。检查下面的代码以获得所需的结果。

$(function(){
    $("#enterBtn").click(handleBindingsOnClick);
    $('#input').on('keydown', function(e) {
      if (e.which == 13) {
          handleBindingsOnClick();
      }
  });
});
function handleBindings(){
    var newtodo = $("#input").val();
    $("#todos").append("<li>"+ newtodo +"</li>");
    $("#input").val("");
}
function handleBindingsOnClick(event){
    if($("#input").val() != ""){
        handleBindings();
    } else {
        alert("Please press enter key or fill the field");
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="text" placeholder="Enter your Text" />
<button id="enterBtn">Enter</button>
<ul id="todos">
   <li>Cricket</li>
   <li>CC</li>
   <li>Web</li>
</ul>

【讨论】：

欢迎您，@JawadAli，您可以投票并接受此答案，以便对其他人有所帮助。

【解决方案3】：

您可以添加 setTimeout 并使用它来等待 X 秒以查看用户何时完成输入。

var typingTimer;
var doneTypingInterval = 2000;

function handleBindingsOnPress(event) {
  clearTimeout(typingTimer);
  if (event.keyCode === 13 && $("#input").val() != "") {
    handleBindings();
  } else {
    typingTimer = setTimeout(function() {
      alert("Please press enter key or fill the field");
    }, doneTypingInterval);
  }
}

演示

var typingTimer; //timer identifier
var doneTypingInterval = 2000; //time in ms (5 seconds)

$(function() {
  $("#enterBtn").click(handleBindingsOnClick);
  $("#input").keyup(handleBindingsOnPress);
});

function handleBindings() {
  var newtodo = $("#input").val();
  $("#todos").append("<li>" + newtodo + "</li>");
  $("#input").val("");
}

function handleBindingsOnClick() {
  if ($("#input").val() != "") {
    handleBindings();
  }
}

function handleBindingsOnPress(event) {
  clearTimeout(typingTimer);
  if (event.keyCode === 13 && $("#input").val() != "") {
    handleBindings();
  } else {
    typingTimer = setTimeout(function() {
      alert("Please press enter key or fill the field");
    }, doneTypingInterval);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="text" placeholder="Enter your Text" />
<button id="enterBtn">Enter</button>
<ul id="todos">
  <li>Cricket</li>
  <li>CC</li>
  <li>Web</li>
</ul>

【讨论】：