当输入框为空时，我想在单击或按键（输入键）时发出警报答案

【问题标题】：I want to alert on click or keypress ( enter key ) when the input box is empty当输入框为空时，我想在单击或按键（输入键）时发出警报
【发布时间】：2019-12-31 11:04:03
【问题描述】：

我正在使用下面的 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>

【问题讨论】：

标签： javascript

【解决方案1】：

这只是您的 addListAfterKeyPress() 中的一个逻辑问题。您正在检查长度是否大于 0 以及是否同时按下了 enter 键。您需要先检查输入键，然后再进行其他检查：

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

这样，只有当按下回车键并且 inputLength 为 0 时才会显示警报

【讨论】：

【解决方案2】：

像这样修改alertEmpty函数

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

【讨论】：