當輸入框為空時，我想在單擊或按鍵（輸入鍵）時發出警報

Question

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

Answer 1

這只是 addListAfterKeyPress() 中的邏輯問題。 您正在檢查長度是否大於 0 以及是否同時按下了 Enter 鍵。 您需要先檢查輸入鍵，然后進行其他檢查：

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

有了這個，警報只會在按下回車鍵並且 inputLength 為 0 時顯示

Answer 2

像這樣修改alertEmpty函數

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

當輸入框為空時，我想在單擊或按鍵（輸入鍵）時發出警報

問題描述

2 個解決方案

解決方案1
1 已采納 2019-12-31 11:09:27

解決方案2
0 2019-12-31 11:23:48

當輸入框為空時，我想在單擊或按鍵（輸入鍵）時發出警報

問題描述

2 個解決方案

解決方案1 1 已采納 2019-12-31 11:09:27

解決方案2 0 2019-12-31 11:23:48

解決方案1
1 已采納 2019-12-31 11:09:27

解決方案2
0 2019-12-31 11:23:48