vue中回车键登录

created() {

    let that = this;

    document.onkeypress = function(e) {

      var keycode = document.all ? event.keyCode : e.which;

      if (keycode == ) {

        that.login();// 登录方法名

         return false;

      }

    };

  }

以上的代码，在这几天测试发现有一个问题，在登录进系统之后，从首页切换到其他界面，点击回车，会导致界面调整到首页！

要实现：只在Login界面点击回车才执行onkeypress方法，其他的点回车均不触发(还不明白为什么在其他界面回车会执行Login界面的created-_-|| )

思路：在Login.vue最外层绑定id，再绑定键盘事件。

$(“#loginDiv”).bind("keypress",toLogin);

测试发现监听不到按键事件，因为div元素没法获取焦点，但只要为div元素加上tabIndex属性就能获取焦点

以上方法虽然也能触发keypress，但还有点瑕疵~ 就是打开登录页时，需要鼠标点一下界面，才能触发keypress！！！

又一思路：界面中需要有一个聚焦，在回车时才好执行keypress。故在界面中加input文本框，让不管从哪里打开或跳到Login.vue都聚焦文本框

所以自定义指令：

 <div id="loginDiv" tabindex="" style="outline:0;" >

    <input type="text" v-focus style="opacity:0;position:absolute;">

</div>

directives: {

  focus: {

    // 指令的定义

    inserted: function (el) {

      el.focus()

    }

  }

},

自定义指令及inserted用法截图自vue官网文档如下：

解决方法参考自：

https://blog.csdn.net/zh1159007904/article/details/78026517

https://www.cnblogs.com/hjj2ldq/p/7831972.html

巴特西

vue中回车键登录

最新文章

热门文章