Fatal编程技术网
  • javascript/
  • Javascript 事件侦听器不适用于textbox

Javascript 事件侦听器不适用于textbox

javascript

Javascript 事件侦听器不适用于textbox,javascript,addeventlistener,event-listener,Javascript,Addeventlistener,Event Listener,我刚刚开始学习javascript和html 我对EventListener有一个问题，它似乎根本不起作用。 在我的代码中，我有一个文本框，供用户以DD/MM/YYYY格式输入日期值。 总的代码是有效的，即日/月/年检查，但是我想添加一些高级功能，比如自动插入斜杠 参考帮助后，问题中的解决方案回答了我的原因，但当我将其复制到代码中时，自动斜杠根本不起作用 起初我认为可能是onChange导致了这个问题，我试着删除它，仍然是同一个问题 这是 日期测试 函数checkDob（） { var dob

我刚刚开始学习javascript和html

我对
EventListener
有一个问题，它似乎根本不起作用。 在我的代码中，我有一个文本框，供用户以DD/MM/YYYY格式输入日期值。 总的代码是有效的，即日/月/年检查，但是我想添加一些高级功能，比如自动插入斜杠

参考帮助后，问题中的解决方案回答了我的原因，但当我将其复制到代码中时，自动斜杠根本不起作用

起初我认为可能是
onChange
导致了这个问题，我试着删除它，仍然是同一个问题

这是


日期测试
函数checkDob（）
{
var dobInput=document.getElementById（“dobTxt”）.value；
var dobData=dobInput.split（“/”）；
var day=dobData[0]；
var月=dobData[1]；
var年=数据[2]；
如果（检查月（月））
支票日（日、月、年）；
}
函数checkDay（dayValue、monthValue、yearValue）
{
如果（dayValue28）
{
警报（“只有28天”）；
}
//月份-4月、6月、9月、11月
//只有30天
如果（monthValue==4 | | monthValue==6 | | monthValue==9 | | monthValue==11）
{
如果（dayValue30）
{
警报（“只有30天”）；
}
}
其他的
{
//所有其他月份只有31天
如果（dayValue30）
{
警报（“只有31天”）；
}
}
}
功能检查月（月值）
{
如果（12个月）
{
警报（“月值无效。请重新输入1到12之间的值”）；
返回false；
}
返回true；
}
var dob=document.getElementById（“dobTxt”）；
dob.addEventListener（“键控”，设置日期）；
函数setDate（）{
dob.value=dob.value.replace（/^（\d\d）（\d）$/g，“$1-$2”）。replace（/^（\d\d\-\d\d）（\d+）$/g，“$1-$2”）。replace（/[^\d\-]/g，”）；
}
出生日期
我需要做些什么来启用事件侦听器功能吗？ 我正在使用Google Chrome运行我的
html
，在其他浏览器中也尝试过，遇到了同样的问题

如果有人能对此有所了解，请提前向我们表示感谢。

对您的
替换
和您的验证器（以“/”分隔）稍作更改，它似乎正在工作

函数checkDob（）{
var dobInput=document.getElementById（“dobTxt”）.value；
var dobData=dobInput.split（“/”）；
var day=dobData[0]；
var月=dobData[1]；
var年=数据[2]；
如果（检查月（月））
支票日（日、月、年）；
}
函数checkDay（dayValue、monthValue、yearValue）{
console.log（dayValue、monthValue、yearValue）
如果（dayValue<1 | | dayValue>28）{
警报（“只有28天”）；
}
//月份-4月、6月、9月、11月
//只有30天
如果（monthValue==4 | | monthValue==6 | | monthValue==9 | | monthValue==11）{
如果（dayValue<1 | | dayValue>30）{
警报（“只有30天”）；
}
}否则{
//所有其他月份只有31天
如果（dayValue<1 | | dayValue>30）{
警报（“只有31天”）；
}
}
}
功能检查月（月值）{
log（'monthValue'，monthValue）
如果（月值<1 | |月值>12）{
警报（“月值无效。请重新输入1到12之间的值”）；
返回false；
}
返回true；
}
函数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，”）；
}
//在页面加载后设置eventlistener
window.onload=函数（）{
const dob=document.getElementById（“dobTxt”）
dob.addEventListener（“键控”，设置日期）；
}

出生日期
添加您的dob.addEventListener（“向下键”，设置日期）；在像var dob=document.getElementById（“dobTxt”）这样的表单结束标记之后；dob.addEventListener（“键控”，设置日期）@Pluda我尝试了你所做的，这一行-
dob.addEventListener（“keydown”，setDate）将在我的html页面中表示并显示为文本。我想那是错的？谢谢你的回答，但是当代码在这里运行时，我在我的代码中尝试了，但仍然不起作用。你复制了JS和HTML？我把bothYes改成了bothYes，改成了bothYes，我是根据你在我的第一篇文章中对代码所做的修改来做的）嗯，如果你能创建一个关于stackblitz或plunkr之类的例子，我很乐意举个例子look@k_plan-对不起，我的错。代码段不需要window.onload，我没有注意到我们引用的变量不在window.onload范围内。在这里，我只做了两个更改—只需将
常量dob=…
添加到window.onload和setDate。在代码中，它现在应该可以正常工作了。

<!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>