事件侦听器不适用于文本框

Question

I have just started learning javascript and html.我刚开始学习javascript和html。

I have an issue with the EventListener in which it does not seems to be functioning at all.我对EventListener有一个问题，它似乎根本不起作用。 In my code, I have a textbox for users to enter in a date value in the format of DD/MM/YYYY.在我的代码中，我有一个文本框供用户输入 DD/MM/YYYY 格式的日期值。 The overall code works, ie.整体代码有效，即。 the day/month/year checking, however I thought of adding in advanced functionality such as auto-inserting the slashes.日/月/年检查，但是我想添加高级功能，例如自动插入斜杠。

Having refer to Javascript input that automatically adds '/' to a date for help, the solution within the question answers to my cause, but as soon as I copied it to my code, the auto-slashes are not working at all.参考Javascript 输入自动将“/”添加到日期以寻求帮助，问题中的解决方案回答了我的原因，但是一旦我将它复制到我的代码中，自动斜杠根本不起作用。

Initially I have thought it could be the onChange that could be causing the issue, I tried removing it, still the same issue.最初我认为可能是导致问题的onChange ，我尝试将其删除，仍然是同样的问题。

Here is my code这是我的代码

<!DOCTYPE html>

<html>

    <title> Date Test</title>
    <script type="text/javascript">

        function checkDob()
        {
            var dobInput = document.getElementById("dobTxt").value;
            var dobData = dobInput.split("/");
            
            var day = dobData[0];
            var month = dobData[1];
            var year = dobData[2];

            if (checkMonth(month))
                checkDay(day, month, year);
        }

        function checkDay(dayValue, monthValue, yearValue)
        {
            
            if (dayValue<1 || dayValue>28)
            {
                alert("only have 28 days");
            }

            // For months - April, June, September, November
            // Only have 30 days
            if (monthValue==4 || monthValue==6 || monthValue==9 || monthValue==11)
            {
                if (dayValue<1 || dayValue>30)
                {
                    alert("only have 30 days");
                }
            }
            else
            {
                // All other months only have 31 days
                if (dayValue<1 || dayValue>30)
                {
                    alert("only have 31 days");
                }
            }
        }

        function checkMonth(monthValue)
        {
            if (monthValue<1 || monthValue>12)
            {
                alert("Invalid month value. Please re-enter between 1 to 12.");
                return false;
            }
            return true;
        }

        var dob = document.getElementById("dobTxt");
        dob.addEventListener("keydown", setDate);
        function setDate() {
            dob.value = dob.value.replace(/^(\d\d)(\d)$/g,"$1-$2").replace(/^(\d\d\-\d\d)(\d+)$/g,"$1-$2").replace(/[^\d\-]/g,'');
        }

    </script>

    <body>

        <form id="form">

            <!-- DOB Element -->
            <label>Date of Birth</label>
            <input id="dobTxt" name="birthdate" type="text" maxlength="10"placeholder="DD/MM/YYYY" onchange="checkDob()" />
            <br>

        </form>
    </body>

</html>

Do I need to do something to enable the event listener functionality?我需要做些什么来启用事件侦听器功能吗？ I am running my html using Google Chrome, also tried in other browsers, same issue encountered.我正在使用 Google Chrome 运行我的html ，也在其他浏览器中尝试过，遇到了同样的问题。

Many thanks in advance if anyone could shed some light on it.如果有人能对此有所了解，请提前非常感谢。

Answer 1

A slight change to your replace and your validator (to split by '/') and it seems to be working.对您的replace和验证器稍作更改（以“/”分隔），它似乎正在工作。

 function checkDob() { var dobInput = document.getElementById("dobTxt").value; var dobData = dobInput.split("/"); var day = dobData[0]; var month = dobData[1]; var year = dobData[2]; if (checkMonth(month)) checkDay(day, month, year); } function checkDay(dayValue, monthValue, yearValue) { console.log(dayValue, monthValue, yearValue) if (dayValue < 1 || dayValue > 28) { alert("only have 28 days"); } // For months - April, June, September, November // Only have 30 days if (monthValue == 4 || monthValue == 6 || monthValue == 9 || monthValue == 11) { if (dayValue < 1 || dayValue > 30) { alert("only have 30 days"); } } else { // All other months only have 31 days if (dayValue < 1 || dayValue > 30) { alert("only have 31 days"); } } } function checkMonth(monthValue) { console.log('monthValue', monthValue) if (monthValue < 1 || monthValue > 12) { alert("Invalid month value. Please re-enter between 1 to 12."); return false; } return true; } function setDate() { const dob = document.getElementById("dobTxt") dob.value = dob.value.replace(/^(\d\d)(\d)$/g, "$1/$2").replace(/^(\d\d\/\d\d)(\d+)$/g, "$1/$2").replace(/[^\d\/]/g, ''); } // set the eventlistener after the page loads window.onload = function() { const dob = document.getElementById("dobTxt") dob.addEventListener("keydown", setDate); }

 <form id="form"> <!-- DOB Element --> <label>Date of Birth</label> <input id="dobTxt" name="birthdate" type="text" maxlength="10" placeholder="DD/MM/YYYY" onchange="checkDob()" /> <br> </form>

事件侦听器不适用于文本框

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-06-02 16:12:01

事件侦听器不适用于文本框

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-06-02 16:12:01

解决方案1
1 已采纳 2021-06-02 16:12:01