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. 新浪微博客户端(32)-设置相册图片的contentMode

    DJStatusPhotoView.m #import "DJStatusPhotoView.h" #import "UIImageView+WebCache.h&quo ...

  2. seajs模块加载与执行原理小记

    本文仅讨论具名模块的情况,即通过spm打包出来的模块. 想起ID与路径统一原则,详见https://github.com/seajs/seajs/issues/930 今天又研究了下seajs源码,源 ...

  3. acdream.A Very Easy Triangle Counting Game(数学推导）

    A - A Very Easy Triangle Counting Game Time Limit:1000MS     Memory Limit:64000KB     64bit IO Forma ...

  4. 新的开始---cocos2d

    今天是一个新的开始,cocos2d的环境搭配好了,并且打包案桌apk的环境也搭配好了,安卓的这个搭配环境还是出了一点问题,前面弄了两个晚上(11-12.30)没弄出来,中间好几天都没有去弄,今天光棍节 ...

  5. 关于delphi PAServer 远程调试DLL文件

    用PAServer调试的话会产生一个默认user-connectionname的文件夹,且这个文件夹不能自定义.因此无法使调试的dll文件生成到host主程序所在的文件夹下而导致无法调试. 变通方法: ...

  6. HTML前端

    1.<html>内容</html> 解释:HTML文档的文档标记,也成为HTML开始标记 功能:这对标记分别位于网页的最前端和最后端 <html>在最前段表示网页的 ...

  7. [ruby on rails] 跟我学之(6)显示指定数据

    根据<[ruby on rails] 跟我学之路由映射>,我们知道,可以访问 GET    /posts/:id(.:format) 来显示具体的对象. 1. 修改action 修改 ap ...

  8. 【OpenStack】OpenStack系列11之namaspace&openvswitch原理实践

    Namespace实现网络隔离与互通 新建ns: ip netns add foo 查看ns: ip netns 查看ns详细配置: ip netns exec foo ip addr 设置ns内部l ...

  9. centOS设置zookeeper开机自动启动

    在/etc/rc.local文件中追加: # java_homeexport JAVA_HOME=/opt/java/jdk1.7.0_75# zookeeper/home/cent2014/zook ...

  10. Java for LeetCode 028 Implement strStr()

    Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if needle ...