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

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

我想在我的文本字段上添加验证，即在填充文本字段后，用户将按 Enter 键，该文本应添加到列表中，如果文本字段为空或用户按错了键会以任何形式显示和错误。 但是在输入过程中开始显示错误，没有等待用户按下 Enter 键。

$(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>

解决方法

你可以写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>

,

您可以添加一个 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>

,

您需要为此使用 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>