如何实现点击按钮与按下Enter键触发邮政编码校验提示

你的问题出在给按钮绑定键盘事件——用户按下Enter时，焦点一般在输入框而非按钮，所以按钮的keyup事件不会触发。正确的做法是给输入框添加键盘事件监听，同时将校验逻辑抽成独立函数，避免重复代码。

以下是修改后的完整代码：

<!DOCTYPE html>
<html>
    <body>
        <input type="text" id="zipCode" placeholder="Enter ZIP code" />
        <button id="checkButton">Check</button>
        <div id="msg"></div>
        <script>
            var button = document.getElementById("checkButton");
            var zipInput = document.getElementById("zipCode");
            
            function checkIfAvailable(zip) {
                let zones = ["60004", "60005", "60006"]
                return zones.indexOf(zip) >= 0;
            }
            
            // 独立的校验函数，供点击和键盘事件调用
            function validateZip() {
                let zip = zipInput.value;
                let msg = "";
                if (checkIfAvailable(zip)) {
                    msg = "Service is available your area!";
                } else {
                    msg = "Sorry, we do not service your area yet.";
                }
                document.getElementById("msg").innerHTML = msg;
            }
            
            // 按钮点击事件
            button.addEventListener("click", validateZip);
            
            // 输入框Enter键触发事件
            zipInput.addEventListener("keyup", function(e) {
                // 监听Enter键（两种判断方式兼容不同浏览器）
                if (e.key === "Enter" || e.keyCode === 13) {
                    validateZip();
                }
            });
        </script>
    </body>
</html>

关键修改点说明： #

• 抽离validateZip为独立函数：避免重复编写相同的校验逻辑，代码更简洁易维护
• 给输入框绑定keyup事件：用户在输入框按下Enter时，焦点在输入框，事件会被触发
• 判断Enter键：通过e.key === "Enter"或e.keyCode === 13来识别Enter按键，兼容不同场景

内容的提问来源于stack exchange，提问作者Sics Arts