我想在输入框为空时单击或按键(回车键)时发出警报

  • 本文关键字:回车 单击 javascript
  • 更新时间 :
  • 英文 :


我正在使用下面的javascript在输入框为空时发出警报。但是当我按任何键写一个单词时,它会发出警报。如果只有用户在字段为空时按回车键,我需要发出警报。谁能告诉我是否有任何解决方案?

<head>
<meta charset="UTF-8">
<title>Practise</title>
</head>
<body>
<h1>Shopping List</h1>
<p id="first">Get it done today</p>
<input id="userinput" type="text" placeholder="Enter Your Items">
<button id="enter">Enter</button>
<ul>
<li class="bold red" random="23">Notebook</li>
<li>Hello</li>
<li>Spanich</li>
<li>Rich</li>
<li>Poor</li>
<li>Equal</li>
</ul>

<script>
var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");
function inputLength() {
return input.value.length;
}
function alertEmpty() {
if (inputLength() === 0) {
alert("Please Enter Your Item First");
}
}
function creatListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
input.value = "";
}
function addListAfterClick() {
if (inputLength() > 0) {
creatListElement();
} else(alertEmpty());
}
function addListAfterKeypress() {
if (inputLength() > 0 && event.keyCode === 13) {
creatListElement();
} else(alertEmpty());
}
button.addEventListener("click", addListAfterClick);
input.addEventListener("keypress", addListAfterKeypress);
</script>
</body></html>

这只是addListAfterKeyPress((中的一个逻辑问题。您正在检查长度是否大于 0,以及是否同时按下了回车键。您需要先检查回车键,然后进行其他检查:

function addListAfterKeypress() {
if (event.keyCode === 13) {
if (inputLength() > 0) {
creatListElement();
} else {
alertEmpty() 
}
}
}

这样,警报只会在按下回车键并且输入长度为 0 时才会显示

像这样修改 alertEmpty 函数

function alertEmpty() {
if( event.keyCode == 13 ){
if (inputLength() === 0) {
alert("Please Enter Your Item First");
}
}
}

最新更新