在做登录页面时候,通常当用户输入账号密码后直接按enter键就触发登录按钮了。
如果是input标签,vue中可以绑定按键修饰符,但是如果是其它标签呢。我的做法如下:

document.querySelector('body').addEventListener('keyup', function (e) {
if (e.keyCode == 13) { // enter 键值 为13
document.querySelector('.button-keyup').click()
};
})

在其它标签上加入class button-keyup ,名字可以自己隋边取,只要获取到DOM节点即可。

如何在普通的元素上实现enter键的绑定的更多相关文章

  1. 为元素绑定监听键盘上的enter键被按下事件的方法

    $("someElement").on("keydown", function(event){ var key = event.which; if(key == ...

  2. HTML页面禁用Enter键自动提交表单

    今天在开发页面时,遇到一个小BUG,,如下图 在页面的文本框获取焦点之后,再按键盘上的Enter键,页面form就会自动提交.如下是页面禁止Enter自动提交代码: document.onkeydow ...

  3. 在ag-grid表格上实现类似Excel中的按下enter键自动跳转到下一行对应的输入框功能,Angular4开发

    最近的项目使用ag-grid在Angular中处理表格,收到个需求是要能够同时修改大量的数据,按下Enter键的时候,光标得自动跳到下一行的对应列上. 方法一:用ag-grid自带的 enterMov ...

  4. 按Enter键后Form表单自动提交的问题

    怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...

  5. 回车和换行有什么区别?我们平时按下的Enter键是回车还是换行?

    来源:http://www.52rd.com/blog/Detail_RD.Blog_imjacob_12317.html -------------------------------------- ...

  6. 按下enter键后表单自动提交问题

    在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...

  7. form表单按enter键自动提交的问题

    废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...

  8. android软键盘enter键

    enter键,回车键,电脑键盘上enter键就有多种响应.android软键盘也不例外 你在EditText上输入以后,想在下一行输入框输入,可能需要去点击下一行输入框,让它获取焦点,也可能要隐藏软键 ...

  9. 【Chrome控制台】获取元素上绑定的事件信息以及监控事件

    需求场景 在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况. 解决方案 普通操作 之前面对这种情况,一般采取的措施就是在各个事件里写console.info, ...

随机推荐

  1. Web Service概述 及 应用案例

    Web Service的定义  W3C组织对其的定义如下,它是一个软件系统,为了支持跨网络的机器间相互操作交互而设计.Web Service服务通常被定义为一组模块化的API,它们可以通过网络进行调用 ...

  2. JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单

    1.如果小伙伴们只是想实现点击某个按钮(通过click事件)实现复制功能. 那小哥哥我在这里推荐大家使用2个非常好用的插件 (1)clipboard.js:纯js插件,无需flash,相对来说更轻量级 ...

  3. 基于TCP的大文件发送、UDP、socketserver

    基于TCP的大文件发送 #server服务端 import struct import json import os import socket server = socket.socket() # ...

  4. android完整智能家居、备忘录、蓝牙配对、3D动画库、购物车页面、版本更新自动安装等源码

    Android精选源码 app 版本更新.下载完毕自动自动安装 android指针式分数仪表盘 ANdroid蓝牙设备搜索.配对 Android 图片水印框架,支持隐形数字水印 android3D旋转 ...

  5. 查询AD中被锁定的账号并进行解锁

    1:查询AD中被锁定的账号: Search-ADAccount -LockedOut | export-csv -path c:\aaavvv.csv 2:解除锁定 Search-ADAccount ...

  6. crm项目-权限组件

    ###############    表结构分析     ################ """ 表结构设计: 1,四张表 用户表,userinfo,这个表本身不会被创 ...

  7. OpenCV Sobel 导数

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...

  8. mudbox卸载/完美解决安装失败/如何彻底卸载清除干净mudbox各种残留注册表和文件的方法

    在卸载mudbox重装mudbox时发现安装失败,提示是已安装mudbox或安装失败.这是因为上一次卸载mudbox没有清理干净,系统会误认为已经安装mudbox了.有的同学是新装的系统也会出现mud ...

  9. Data Binding on Android

    Data Binbing框架是在2015年Google I/O大会上最早提出来的,一直在Android开发者中热议,但是很少有真正在项目中用到.本文简单介绍Data Binding框架的简单用法以及其 ...

  10. C语言学习笔记之获取文件长度

    本文为原创文章,转载请标明出处 #include <stdio.h> #include <stdlib.h> int main() { FILE *inputFile; inp ...