2.2  按Enter键调用登录按钮

【实例描述】

为了方便用户操作，在登录邮箱或论坛时，如果用户输入了用户名和密码，按Enter键时，都会自动调用登录按钮。本例学习如何实现此功能。

【实现代码】

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head>
  3. <title>Check Score</title>
  4. <script language="JavaScript">
  5. function keyLogin(){
  6. if (event.keyCode==13)                          //按Enter键的键值为13
  7. document.getElementById("input1").click();  //调用登录按钮的登录事件
  8. }
  9. </script>
  10. </head>
  11. <body onkeydown="keyLogin();">
  12. <input id="input1" value="登录" type="button"  onclick="alert('调用成功！')">
  13. </body>
  14. </body>
  15. </html>

【运行效果】

按Enter键后的效果如图2-1所示。

 
图2-1  按Enter键后的效果

【难点剖析】

本例的重点是如何判断用户敲击的是Enter键，这通过判断键值"keyCode"实现，"Enter"的键值为13。使用"getElementById"方法，通过按钮的ID找到页面中的"登录"按钮，然后直接调用其"click"方法即可。

Enter直接登录的更多相关文章

  1. 系统开发中按下Enter键登录系统

    转载来自:http://www.jb51.net/article/54308.htm 系统开发中按下Enter键登录系统,即就是监听键盘,当按下Enter键后调用登录按钮的click()事件. JS方 ...

  2. enter 键登录的实现

    js 代码 document.onkeypress = function() { var iKeyCode = -1; if (arguments[0]) { iKeyCode = arguments ...

  3. vue中Enter触发登录事件和javascript中Enter触发点击事件

    created(){ window.addEventListener('keydown', this.handleKeyDown, true)//开启监听键盘按下事件 } 在methods中当keyC ...

  4. 登录时 按Enter 进入登录界面 或者下一行

    function keyLogin() { if (event.keyCode == 13) //回车键的键值为13 $(".btn-submit").click(); //调用登 ...

  5. JSP登录页面使用Enter键登录【转】

    按回车键实现登录   第一种方法:        <html xmlns="http://www.w3.org/1999/xhtml" ><head>  & ...

  6. JS实现登录页面记住密码和enter键登录

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>按 ...

  7. jQuery实现enter键登录

    在登录时,使用快捷键登录时常用的方法,其中 loginReq()方法为请求登录检索的方法 $("#login").click(function(){ loginReq(); }); ...

  8. jQuery实现按enter键登录

    <script> $(document).keydown(function (event) { if (event.keyCode == 13) { $("#btn_Login& ...

  9. Enter键登录

    <div class="zhuce_input_ty"> <p><a id="qianlogin" onclick="U ...

随机推荐

  1. (转) 新的开始之Win7、CentOS 6.4 双系统 硬盘安装

    http://blog.csdn.net/cnclenovo/article/details/11358447

  2. lamp环境centos6.4

    http://www.centos.bz/2011/09/centos-compile-lamp-apache-mysql-php/comment-page-1/#comments 编译安装: 首先卸 ...

  3. 【原创】express3.4.8源码解析之中间件

    前言 注意:旧文章转成markdown格式. 中间件(middleware)的概念来自于TJ的connect库,express就是建立在connect之上. 就如同connect的意思是 连接 一样, ...

  4. 用JSON-server模拟REST API(二) 动态数据

    用JSON-server模拟REST API(二) 动态数据 上一篇演示了如何安装并运行 json server , 在这里将使用第三方库让模拟的数据更加丰满和实用. 目录: 使用动态数据 为什么选择 ...

  5. Hello Kitty微信主题很可爱?小心财产安全!

    个性化是产品服务的一个趋势.微信很火,可为什么微信主题只有一个呢?你让那些小女生情何以堪?这时HelloKitty微信主题.大嘴猴.哆啦A梦等一大批主题在网上出现了,有些打着免费的旗号却做着盗号的勾当 ...

  6. 搭建DNS服务器

    导读 Linux下架设DNS服务器通常是使用Bind程序来实现的.Bind是一款实现DNS服务器的开放源码的软件.DNS即域名系统,主要功能是将人们易于记忆的Domain Name(域名)与不易记忆的 ...

  7. [BZOJ1177][Apio2009]Oil

    [BZOJ1177][Apio2009]Oil 试题描述 采油区域 Siruseri政府决定将石油资源丰富的Navalur省的土地拍卖给私人承包商以建立油井.被拍卖的整块土地为一个矩形区域,被划分为M ...

  8. Android音频播放实例

    MediaPlayer: 此类适合播放较大文件,此类文件应该存储在SD卡上,而不是在资源文件里,还有此类每次只能播放一个音频文件. 1.从资源文件中播放 MediaPlayer player = ne ...

  9. HLG2081分苹果

    苹果 Time Limit: 1000 MS Memory Limit: 32768 K Total Submit: 39(24 users) Total Accepted: 29(22 users) ...

  10. 【SpringMVC】SpringMVC系列4之@RequestParam 映射请求参数值

    4.@RequestParam 映射请求参数值 4.1.概述     Spring MVC 通过分析处理方法的签名,将 HTTP 请求信息绑定到处理方法的相应人参中.Spring MVC 对控制器处理 ...