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

Question

我刚开始学习javascript和html。

我遇到了 EventListener 的问题，它似乎根本无法正常工作。在我的代码中，我有一个文本框供用户输入 DD/MM/YYYY 格式的日期值。整体代码有效，即。 day/month/year 检查，但是我想添加高级功能，例如自动插入斜杠。

已参考 Javascript 自动将“/”添加到日期的输入寻求帮助，问题中的解决方案回答了我的原因，但是当我将其复制到我的代码中时，自动斜杠根本不起作用。

最初我认为可能是 onChange 导致了这个问题，我尝试删除它，仍然是同样的问题。

这里是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,"-").replace(/^(\d\d\-\d\d)(\d+)$/g,"-").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>

我需要做些什么来启用事件侦听器功能吗？我是运行我的 html 使用 Google Chrome，也在其他浏览器中尝试过，遇到同样的问题。

非常感谢，如果有人能对此有所了解。

Answer 1

对您的 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, "/").replace(/^(\d\d\/\d\d)(\d+)$/g, "/").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>

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

Event listener is not working for textbox

javascript

event-listener

addeventlistener