这篇文章主要介绍了原生JS按回车键实现登录的方法，众所周知，这是在web程序设计中的一个非常实用的小技巧，主要用于表单提交，包括注册、登录等等功能，具有很好的用户体验，有着非常广泛的实用价值，需要的朋友可以参考一下：
<html>

<head>

<title>原生JS按回车键实现登录</title>

<meta charset="utf-8">

</head>

<body>

<input placeholder="请输入用户名" type="text" onkeydown="keyEnter()">

<input placeholder="请输入密码" type="password" onkeydown="keyEnter()">

<input value="登录" type="button" name="submit" onClick="login()">

<script type="text/javascript">

function keyEnter(){//按下enter键，执行登录按钮的登录事件 回车键的键值为13

if(event.keyCode==13){

document.getElementsByName("submit")[0].click();

}

}

function login(){

alert('调用成功666！');

}

</script>

</body>

</html>

具体的登录功能，放到login()中即可。

原生js按回车键实现登录的更多相关文章

  1. JS按回车键实现登录的方法

    本文实例讲述了JS按回车键实现登录的方法,该功能有着非常广泛的实用价值.分享给大家供大家参考之用.具体方法如下: 方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 < ...

  2. js 捕捉回车键触发登录，并验证输入内容

    js 捕捉回车键触发登录,并验证输入内容 有时候我们会遇到 web 页面中捕捉按键,触发一些效果, 比如常见的回车键触发登录,并验证输入内容,下面会介绍,截图: 一.最简单的捕捉回车键:判断按下的是不 ...

  3. vue.js中 ,回车键实现登录或者提交表单!

    vue的功能非常强大,但是我们作为一个后端开发人员,前端的东西不一定都弄的很明白,今天就给大家介绍一个回车提交表单的真实案例,达到回车登录的效果! @ keyup.enter 实现的效果 <in ...

  4. 原生js+css实现重力模拟弹跳系统的登录页面

    今天小颖把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的o ...

  5. 原生js登录创建cookie

    原生js创建cookie,功能:点击登录按钮时,将用户名.密码存为cookie:页面再次加载时,自动读取cookie中的用户名.密码. <html><head><titl ...

  6. 原生JS实现拖动滑块验证登录效果

    ♀分享一组利用原生JS实现拖动滑块验证效果 ♀在这个组代码中涉及三个方面的知识: ⑴事件处理 ⑵添加验证标记 ⑶选择器的封装   代码如下: <!DOCTYPE html> <htm ...

  7. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  8. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  9. 利用原生js制做数据管理平台，适合初学者学习

    摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...

随机推荐

  1. 函数的应用_python

    一.各类函数应用 1.高阶函数:函数里面调用函数 例子: def add(a): return (a*a) def print_info(fun,c,d): #传入函数与参数 return fun(c ...

  2. 题解【洛谷P2070】刷墙

    题面 将每一次移动的距离进行差分,前缀和判断移动的距离是否\(\geq 2\)即可. #include <bits/stdc++.h> #define itn int #define gI ...

  3. CentOS7.0安装EMQ代理服务

    CentOS7.0安装EMQ代理服务 安装文件下载 官网 : https://www.emqx.io/cn/ 下载地址: https://www.emqx.io/cn/downloads 选择需要的版 ...

  4. Ubuntu 的apt install 和卸载正确姿势

    先说下使用apt  installl 安装的包的卸载: apt-get remove: 卸载软件apt-get purge: 卸载软件和配置文件apt-get autoremove: 移除没有使用的依 ...

  5. django入门与实践（续）

    完善博客 博客页面设计 页面概要 1.博客主页面 主页面内容 文章标题列表,超链接 发表博客按钮(超链接) 列表编写思路 取出数据库中所有文章对象 将文章对象们打包成列表,传递到前端 前端页面把文章以 ...

  6. 2D TOOLKIT备忘录

    通过Clip名称更改动画片段 // 通过clip名称获取clip实例 tk2dSpriteAnimationClip clip = childrenAnimator.GetClipByName(&qu ...

  7. 用OpenCV读取摄像头

    首先插入摄像头 在电脑中查看 #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp ...

  8. 【sql】sql必知必会_01

    数据: /* Navicat Premium Data Transfer Source Server : localhost_3306 Source Server Type : MySQL Sourc ...

  9. 命令行（二）：Anaconda3

    1,进入base虚拟环境 $:activate 2,创建虚拟环境(自动下载Python3最新版本) $:conda create -n <virtual_name> python= 3,切 ...

  10. vue中style下scope的使用和坑

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件 ...