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. linux在所有文件中查找某一个字符

    # find <directory> -type f -name "*.c" | xargs grep "<strings>" < ...

  2. php利用淘宝IP库获取用户ip地理位置

    我们查ip的时候都是利用ip138查询的,不过那个有时候是不准确的,还不如自己引用淘宝的ip库来查询,这样准确度还高一些.不多说了,介绍一下淘宝IP地址库的使用. 淘宝IP地址库 淘宝公布了他们的IP ...

  3. 最新 DEDECMS SQL 注入 0day

    4月29日消息:国内安全研究团队“知道创宇”称截获到最新DEDECMS SQL注入0day,DEDECMS官网目前提供下载的最新版5.7也受影响,截止本告警发出时官方尚未给出补丁或解决方案,此漏洞利用 ...

  4. 通过rails console执行sql语句

    $ RAILS_ENV=production bundle exec rails c irb(main):008:0> r = ActiveRecord::Base.connection.exe ...

  5. 用Maven插件生成Mybatis代码/数据库

    现在代码管理基本上是采用Maven管理,Maven的好处此处不多说,大家用百度搜索会有很多介绍,本文介绍一下用Maven工具如何生成Mybatis的代码及映射的文件. 一.配置Maven pom.xm ...

  6. Apache同时支持PHP和Python的配置方法

      一.http://www.oschina.net 网站中的一个问答内容: 原来把 WSGIScriptAlias / "D:/project/ddd/django.wsgi"  ...

  7. poj1860 bellman—ford队列优化 Currency Exchange

    Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 22123   Accepted: 799 ...

  8. Linux 的shell 字符串截取很有用。有八种方法。

    一 Linux 的字符串截取很有用.有八种方法. 假设有变量 var=http://www.linuxidc.com/123.htm 1  # 号截取,删除左边字符,保留右边字符. echo ${va ...

  9. 在 FREEBUF 投放广告

    在 FREEBUF 投放广告 FreebuF黑客与极客—高质量的全球互联网安全媒体,同时也是爱好者们交流.分享安全技术的最佳平台.本站读者群以IT.政企信息安全人员.互联网安全爱好者和学生为主,对互联 ...

  10. i686和x86_64的区别

    找回TCL隐藏分区(转载) 用Wubi安装 Ubuntu 出现(Initranfs)问题的解决方案 i686和x86_64的区别 2009-04-11 08:19:31|  分类: 电脑问题 |  标 ...