失去登录焦点是使用enter

最新推荐文章于 2024-06-07 16:03:08 发布

xiaocmianju

最新推荐文章于 2024-06-07 16:03:08 发布

阅读量49

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/xiaocmianju/article/details/124952937

版权

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-on的修饰符</title>
</head>
<body>
  <div id="app">
    <!--3. 监听键盘的事件 -->
   <form @submit.prevent=''>
	   账号<input type="text" name="user"/>
	   密码<input type="text" name="password" />
	    <input type="submit"  value="登录" @keyup.enter="submit"/>
   </form>

  </div>
  <script src="vue.js"></script>
  <script>
    const app = new Vue({
      el:"#app",
      methods:{
        submit(){
          console.log("keyup点击")
        }
      },
	  created() {
	      let that = this;
	      document.onkeydown =function(e){
	        e = window.event || e;
	        if(e.code=='Enter'||e.code=='enter'){//验证在登录界面和按得键是回车键enter
	          that.submit();//登录函数
	        }
	      }
	    } 
    })
  </script>
</body>
</html>