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


Posted in Javascript onAugust 25, 2014

本文实例讲述了JS按回车键实现登录的方法,该功能有着非常广泛的实用价值。分享给大家供大家参考之用。具体方法如下:

方法一:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Check Score</title>
<script language="JavaScript">
function keyLogin(){
 if (event.keyCode==13)  //回车键的键值为13
   document.getElementByIdx_x("input1").click(); //调用登录按钮的登录事件
}
</script>
</head>
<body onkeydown="keyLogin();">
<input id="input1" value="登录" type="button" onClick="alert('调用成功!')">
</body>
</html>

方法二:

<script>
function KeyDown()
{
  if (event.keyCode == 13)
  {
    event.returnValue=false;
    event.cancel = true;
    Form1.btnsubmit.click();
  }
}
</script>

使用方法:

<form name="Form1" method="">
用户名:<INPUT TYPE=text SIZE=20 maxlength = 8 onkeydown=KeyDown()>
密码:<INPUT TYPE=password SIZE=20 maxlength = 8 onkeydown=KeyDown()>
<input type="submit" name="btnsubmit" value="提交" />
</form>

方法三:

任何一个网站页面都有登陆界面,很多时候在输入好用户名和密码后,还要用鼠标去点一个类似于登陆什么的按钮或者链接.这样你才能进网站做你喜欢做的事情.
有时候我就在想是不是能在输入好我该输入的东西后,直接敲回车就执行登陆功能呢?解决方法如下:

ss.html页面代码:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="css/text.css" type="text/css">
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onkeydown="on_return();">
  <form name ="loginForm" method="post" action="fuck.html">        
   <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="69%" height="30"><span class="font_04">帐户名</span>
  <input type="text" name="userName" size="18.5">
 </td>
    </tr>
    <tr>
 <td width="69%" height="30"><span class="font_04">密 码</span>
  <input type="password" name="pwd" >
 </td>
    </tr>
    <tr>
 <td width="31%" height="30">
 <a id="sub" onClick='check()' >
 登陆</a></td>
    </tr>
   </table>
  </form>
</body>
</html>
<script language="javascript">
function check() {
    var formname=document.loginForm;
   if (formname.userName.value == "") {
    alert("请输入用户名!");
    formname.userName.focus();
    return false;
  }
  if (formname.pwd.value == "") {
    alert("请输入密码!");
    formname.pwd.focus();
    return false;
  }
  formname.submit();
}
  //回车时,默认是登陆
 function on_return(){
 if(window.event.keyCode == 13){
  if (document.all('sub')!=null){
   document.all('sub').click();
   }
 }
 }
</script>

此处注意:在<body>里面我们加了onkeydown属性,这样我们输入好内容后按键就可以直接执行JS方法on_return()了.因为window.event.keyCode 如果是13的话,表示回车键,所以我们判断我们按的键是不是回车键,如果是我们就去找'sub'属性,假如找到了执行click方法就是了。

希望本文所述方法对大家的web程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
分享网页检测摇一摇实例代码
Jan 14 Javascript
jQuery无刷新上传之uploadify3.1简单使用
Jun 18 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
Js自定义多选框效果的实例代码
Jul 05 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
vue2中使用less简易教程
Mar 27 Javascript
bootstrap下拉框动态赋值方法
Aug 10 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 #Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 #Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 #Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 #Javascript
js获取checkbox复选框选中的选项实例
Aug 24 #Javascript
jQuery异步加载数据并添加事件示例
Aug 24 #Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 #Javascript
You might like
php获取后台Job管理的实现代码
2011/06/10 PHP
php长字符串定义方法
2012/07/12 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
两款万能的php分页类
2015/11/12 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
全面分析Python的优点和缺点
2018/02/07 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python虚拟环境迁移方法
2019/01/03 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
影子教师研修方案
2014/06/14 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
入股合作协议书
2014/10/12 职场文书
业务员辞职信范文
2015/03/02 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
Nginx域名转发使用场景代码实例
2021/03/31 Servers
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL
对讲机的最大通讯距离是多少
2022/02/18 无线电