Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
396 views
in Technique[技术] by (71.8m points)

javascript 进行邮箱正则验证,将验证按钮与 回车键绑定遇到问题

?? 最近新学习了javascr1ipt ,写了 一个邮箱验证,我想将邮箱验证按钮和回车键绑定在一起;
? ?遇到的问题, 在光标移开邮箱填写栏后任然需要点击验证按钮再回车才能显示验证结果;
?&ems; 想要效果 希望在光标移开邮箱填写栏后,直接点击回车键;得到验证的结果;

?? ? javascript 部分代码

   <script type="text/javascript">
             window.onload=function(){
                 // 当邮箱填写完成后
                  document.getElementById("email").onblur=function(){
                      // 当开始按下键盘后
                        document.getElementById("btn").onkeydown=function(event){
                             if(event.keyCode==13){
                                    //拿到邮箱;
                                   var emails=document.getElementById("email").value;
                                   // 创建正则;
                                   var emailEegExp=/^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+.)+[A-Za-z]{2,6}$/;
                                   //经行验证;
                                   if( !emailEegExp.test(emails)){
                                // 显示验证结果;
                                    document.getElementById("errorMessage").innerText="填写邮箱有误";
                                   }
                                 
                             }
                            
                        }
                      
                  }
                  //重新填写
                  document.getElementById("email").onfocus=function(){
                      
                        document.getElementById("errorMessage").innerText="";
                  }
                 
             }
            
            
        </script>
        

???全部代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>邮箱正则验证</title>
    </head>
    <body>
        
        <script type="text/javascript">
             window.onload=function(){
                 // 当邮箱填写完成后
                  document.getElementById("email").onblur=function(){
                      // 当开始按下键盘后
                        document.getElementById("btn").onkeydown=function(event){
                             if(event.keyCode==13){
                                    //拿到邮箱;
                                   var emails=document.getElementById("email").value;
                                   // 创建正则;
                                   var emailEegExp=/^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+.)+[A-Za-z]{2,6}$/;
                                   //经行验证;
                                   if( !emailEegExp.test(emails)){
                                // 显示验证结果;
                                    document.getElementById("errorMessage").innerText="填写邮箱有误";
                                   }
                                 
                             }
                            
                        }
                      
                  }
                  //重新填写
                  document.getElementById("email").onfocus=function(){
                      
                        document.getElementById("errorMessage").innerText="";
                  }
                 
             }
            
            
        </script>
        
        <input type="text" name="" id="email" value="" />
        <span id="errorMessage"  style="color: red; font-size: 17px;">  </span>
        <br>
        <input type="button" name="" id="btn" value="邮箱验证" />
        
    </body>
</html>

??有大神能够告诉我为什么我在光标移开邮箱填写栏之后任然需要点击验证按钮再按下回车键才能完成验证呢???


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

只有获得焦点的元素才能监听键盘事件
即便你的邮箱填写框已经失去焦点,焦点可能回到了 window 上,即只有 window 可以监听到键盘事件,所以你可以在修改按钮的 onkeydown 之前把焦点给按钮:

const btn = document.getElementById("btn");
btn.focus();
// 当开始按下键盘后
btn.onkeydown = //...

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...