vue添加页面键盘事件

我司开发项目,用的是vue+elementUI,做登陆页面的时候,点击enter键的时候要实现和点击登陆按钮一样的功能,所以就百度了一下,于是一通百度之后,就在点击按钮上面直接添加了@keyup.enter.native="submitForm('loginData')",特么开心的保存之后去登陆页面点击enter键竟然没有暖子用。接着百度发现如果你用了element直接在按钮或者el-input上面绑定键盘事件是没有用的,因为需要先获取焦点巴拉巴拉一大堆。解决问题是首要的,接着百度。找到了正确的绑定方法:在vue的created钩子里面插入如下代码就ojbk

1.点击一个按钮跳转到另一个页面 (网址)   两种写法:

created(){
            var _self = this;
            document.onkeydown = function(e){
                var key = window.event.keyCode;
                if(key == 13){
                    _self.submitForm('loginData');
                }
            }
        }
<button onclick="{location.href='location.html'}">获取现在的位置</button> 

<input type="button" value="go" onclick="location.href='http://www.runoob.com">

顺便把我的登陆代码也贴上来:

  

 1 methods: {
 2             submitForm(formName) {
 3                 var _self = this;
 4                 this.$refs[formName].validate((valid) => {
 5                     if (valid) {
 6                        getInfo.post('api-token-auth/',{username:_self.loginData.userCount,password:_self.loginData.password}).then(function(data){
 7                             if(data.data.code == 0){
 8                                 let jwtSession = 'JWT'+' '+data.data.token;
 9                                 localStorage.setItem("checkSession", jwtSession);
10                                 localStorage.setItem("userInfo", data.data.userinfo.username);
11                                 localStorage.setItem("routes",JSON.stringify(data.data.userinfo.permissions))
12                                 // 路由权限过滤
13                                 var menuData = JSON.parse(localStorage.getItem('routes'));
14                                 var localRouter = _self.$router.options.routes
15                                 for(let i = 0;i<menuData.length;i++){
16                                   for(let q = 0;q<localRouter.length;q++){
17                                     if(menuData[i].codename == localRouter[q].path.replace(///,"")){
18                                       localRouter[q].hidden = false;
19                                     } 
20                                   }
21                                 }
22                                 _self.$router.addRoutes(localRouter)
23                                 _self.$router.push({ path: '/ops_menu_sever_manage'});
24                             }
25                             else{
26                                 _self.$message({
27                                     message: data.data.msg,
28                                     type: 'warning'
29                                 });
30                                 // _self.$router.push({ path: '/login'});
31                             }
32                             
33                        });
34                     } else {
35                         console.log("验证没通过!")
36                     }
37                 });
38             },
39             
40         },

2.如果想弹出一个确认框之后再跳转   

如此,大功告成。

  直接加代码 if(confirm('确定跳转?')) 

 

<button onclick="{ if(confirm('确定跳转?'))location.href='body/location.html'}">获取现在的位置</button>

<input type="button" value="go" onclick="if(confirm('确定跳转?')){location.href='http://www.runoob.com'}">

  

3.打开网页时自动触发按钮的单击事件

 // 在<body>里加一个onload="abc()"的属性就行了
                     <head>
                        <script type="text/javascript">
                               function abc(){
                                   alert("onload");
                                                    }
                       </script>
                     </head>
                        <body onload="abc()">
                        </body>

  

4. asp跳转

     如果是在ASP.net中,双击按钮,就可以进入后台页面,然在在后台页面写跳转代码 Response.Redirect("你想要跳转的网页");
     如果在html中,可以写一个form,指定你要跳转到的页面,当然这个按钮要这个form里面

金沙官网线上,     例如:<form action="你要跳到的地址" method="post" >        </form>

5. button 与 submit  的不同

本文由金沙官网线上发布于Web前端,转载请注明出处:vue添加页面键盘事件

您可能还会对下面的文章感兴趣: