javascript - 输入焦点时按 Enter 键会导致屏幕变为空白
问题描述
对不起,标题太长了,但我真的想不出另一种说法。我搜索过类似的帖子,但我发现的只是关于如何使用keyup()
. 我已经在使用它,我的问题是空白屏幕。
问题
我遇到的问题是,如果您单击提交按钮,一切都会正常运行,但是如果您在输入焦点时按下回车键,屏幕就会变成空白。
尝试的解决方案
为了解决这个问题,我尝试设置一个keyup()
函数来防止默认并触发按钮单击。
$(document).keyup(function(e) {
if ($("#bday").is(":focus") && e.key == "Enter") {
e.preventDefault();
$('#submit').click();
}
});
概括
重现步骤
- 在输入字段中输入日期
- 按回车键(在您的键盘上)
预期行为
应该与用鼠标单击提交按钮时相同。
实际行为
按下回车键后,屏幕变为空白。
结论
我看到回车键确实触发了对提交按钮的点击,但屏幕仍然是空白的。我的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>
解决方案
我在这里找到了答案如何使 HTML 按钮不重新加载页面
我使用了 a<button>
以便单击提交按钮不会刷新页面,但显然 Chrome 无论如何都会刷新<button>
如果<form>
. 我将 a 更改<form>
为 a <div>
,当我按 enter 时它不再刷新。