摘要

Question

很抱歉，标题太长了，但我真的想不出另一种写法。我搜索了类似的帖子，但我发现的只是关于如何使用keyup()的帖子。我已经在使用它，我的问题是黑屏。

问题

我遇到的问题是，如果您单击“提交”按钮，那么一切都可以正常运行，但是如果在焦点对准输入时按Enter键，则屏幕将变成空白。

尝试的解决方案

为此，我试图设置一个keyup()函数来阻止Default并触发按钮单击。

$(document).keyup(function(e) {
    if ($("#bday").is(":focus") && e.key == "Enter") {
        e.preventDefault();
        $('#submit').click();
    }
});

摘要

复制步骤

在输入字段中输入日期
按Enter键（在键盘上）

预期行为

应该与用鼠标单击“提交”按钮时相同。

实际行为

按Enter键后，屏幕将变为空白。

结论

我看到回车键确实触发了对“提交”按钮的单击，但是无论如何，屏幕仍然空白。我的keyup()函数设置错误还是我完全错过了其他东西？没有控制台错误可以提示我，所以我一无所知。

摘要

// Keyup
$(document).keyup(function(e) {
    if ($("#bday").is(":focus") && e.key == "Enter") {
        e.preventDefault();
        $('#submit').click();
    }
});

// Input Mask
$("#bday").inputmask({ mask: "99-99-9999" });

// Logic
$("#submit").click(function() {
  // Icons
  var arrow = $(".divider>.fa-arrow-right");
  var x = $(".divider>.fa-times");
  
  // Warnings
  var warning = "<span class='input-warning'>Invalid input. Please try again.</span>"
  
  // Birthday ranges
  var date1 = "1930-01-01";
  var date2 = "1940-01-01";
  var date3 = "1950-01-01";
  var date4 = "1960-01-01";

  // Enrollment period beginnings
  var enp1 = "[date 1 goes here]";
  var enp2 = "[date 2 goes here]";
  var enp3 = "[date 3 goes here]";
  var enp4 = "[date 4 goes here]";

  // Get user input
  var date = $("#bday")
    .val()
    .split("-");

  // Covert date format
  var newDate = date[2] + "-" + date[0] + "-" + date[1];
  console.log(date);
  console.log(newDate);

  // Check for undefined variable
  if ($('#bday').val() === "") {
    $('#app-container').append(warning);
    return false;
  } else {
    $('.input-warning').hide();
    
    // Date comparison
    if (newDate <= date1) {
      $("#enrollment").text("Your enrollment period began a looooong time ago");
      arrow.hide();
      x.fadeIn();
    } else if (newDate >= date1 && newDate <= date2) {
      x.hide();
      arrow.fadeIn().animate({ marginLeft: 0 });
      $("#enrollment").text("Your enrollment period begins on " + enp1);
    } else if (newDate >= date2 && newDate <= date3) {
      x.hide();
      arrow.fadeIn().animate({ marginLeft: 0 });
      $("#enrollment").text("Your enrollment period begins on " + enp2);
    } else if (newDate >= date3 && newDate <= date4) {
      x.hide();
      arrow.fadeIn().animate({ marginLeft: 0 });
      $("#enrollment").text("Your enrollment period begins on " + enp3);
      // For some reason the condition below is firing even though newDate is undefined
    } else if (newDate >= date4) {
      arrow.hide();
      x.fadeIn();
      $("#enrollment").text("Millenials aren't elegible for medicare, silly").fadeIn(500);
    } else {
      arrow.hide();
      x.fadeIn();
    }
  }
});

::placeholder {
  color: graytext;
}

body {
  display: grid;
  justify-items: center;
  align-items: center;
  height: 100vh;
  font-family: sans-serif;
  text-align: center;
}

h2 {
  color: #2780bc;
  font-size: 1.5em;
  margin-top: 0;
}

#app-container {
  max-width: 800px;
  display: grid;
  grid: 1fr 35px / 1fr 100px 1fr;
  grid-row-gap: 30px;
}

#form-wrapper {
  display: grid;
  justify-items: center;
  grid-column: 1;
  border: 2px solid #ececec;
  padding: 20px;
  border-radius: 5px;
}
#form-wrapper form {
  display: grid;
  grid: auto / 1fr;
  width: 210px;
}
#form-wrapper #bday {
  width: 200px;
  height: 50px;
  font-size: 1.9em;
  text-align: center;
  color: #666;
  margin: 0 auto;
  border-radius: 3px;
  border: 1px solid transparent;
  border-top: none;
  border-bottom: 1px solid #ddd;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #fff, 0 1px 0 #fff;
}
#form-wrapper #submit {
  height: 50px;
  color: #fff;
  background-color: #2780bc;
  border-radius: 5px;
  font-size: 1em;
}

.divider {
  display: grid;
  grid-column: 2;
  justify-items: center;
  align-items: center;
}
.divider .fa-arrow-right {
  display: none;
  color: green;
  font-size: 3em;
  margin-left: -20px;
}
.divider .fa-times {
  display: none;
  color: indianred;
  font-size: 3em;
}

#output {
  display: grid;
  grid: 80px 1fr / 1fr;
  align-items: start;
  grid-column: 3;
  border: 2px solid #ececec;
  padding: 20px;
  border-radius: 5px;
}
#output h2 {
  margin-bottom: 0;
}
#output #enrollment {
  display: none;
}

.input-warning {
  grid-row: 2;
  grid-column: 1 / -1;
  border: 2px solid indianred;
  color: indianred;
  width: 250px;
  justify-self: center;
  padding: 5px;
  border-radius: 5px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>
<div id="app-container">
  <div id="form-wrapper">
    <h2 class="text" value="title">Enter your birthday</h2>
    <br>
    <form>
      <input id="bday" placeholder="mm-dd-yyyy" name="bday" type="text"/>
      <br>
      <button id="submit" type="button">SUBMIT</button>
    </form>
  </div>
  <div class="divider"><i class="fas fa-arrow-right"></i><i class="fas fa-times"></i></div>
  <div id="output">
    <h2>Your medicare enrollment period begins:</h2>
    <span id="enrollment"></span>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>

Answer 1

我在这里How do I make an HTML button not reload the page找到了答案

我使用了<button>，因此单击“提交”按钮不会刷新页面，但是显然如果<button>位于<form>内，Chrome仍会刷新。我将<form>更改为<div>，按Enter键时它不再刷新。

Answer 2

$(document).keyup(function(e) {
    if ($("#bday").is(":focus") && e.which == 13) { // 13 is the keycode for Enter
        e.preventDefault();
        $('#submit').click();
    }
});

黑屏的原因是您正在向自己提交表单。按下回车键时，将提交表单内的任何输入。

输入处于焦点状态时按Enter键会使屏幕变黑

问题

尝试的解决方案

摘要

复制步骤

预期行为

实际行为

结论

摘要

2 个答案: