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. 三个css3趣玩小试

    http://jsbin.com/semeh/8 请使用chrome打开 1.类似于网易新闻客户端的loading效果,左边的圆圈 2.发散式心跳效果,右边的圆圈 3.youtub上,搜索进度条效果, ...

  2. IOS项目删除Git

    默认创建工程会在MAC上面创建Git版本管理, 但是呢, 我现在想上传到svn服务器进行管理, 但是已经有个git 好像上传不了 只有把Git删了才能继续. 连问带查, 终于找到解决方案 把 .git ...

  3. rubycas-client单点登录

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) 进行中,未完待续 Ruby 客户端 使用方法0. 在 Gemfile中,加入: gem 'rubyc ...

  4. HDU 2895 编辑距离

    #include<stdio.h> #include<iostream> #include<string.h> #include<algorithm> ...

  5. dhcp原理、安装、相关命令、疑惑

    转自: http://blog.sina.com.cn/s/blog_642e41c20101tct3.html

  6. 使用virtualenv搭建独立的Python环境

    virtualenv可以搭建虚拟且独立的python环境,可以使每个项目环境与其他项目独立开来,保持环境的干净,解决包冲突问题. 一.安装virtualenv virtualenv实际上是一个pyth ...

  7. linux 下查看某个端口是否被占用

    lsof -i:端口号 转自: http://my.oschina.net/u/193184/blog/146885

  8. Web Components之Custom Elements

    什么是Web Component? Web Components 包含了多种不同的技术.你可以把Web Components当做是用一系列的Web技术创建的.可重用的用户界面组件的统称.Web Com ...

  9. python时间转换

    #设a为字符串 import time a = "2011-09-28 10:00:00" #中间过程,一般都需要将字符串转化为时间数组 time.strptime(a,'%Y-% ...

  10. Android runProguard配置 导致module lib 中的包编译时无法识别

    今天写代码时用到了另一个lib型的工程,把它添加到dependencies后,在原工程中可以引用lib中的文件了,但是编译时就会报错,提示包不存在,后来在build.gradle中设置runProgu ...