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 相关文章推荐
单独使用CKFinder选择图片的方法
Aug 21 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
javascript中不提供sleep功能如何实现这个功能
May 27 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
vue 如何使用递归组件
Oct 23 Javascript
在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
一个程序下载的管理程序(二)
2006/10/09 PHP
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
python文件操作之目录遍历实例分析
2015/05/20 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python re模块的高级用法详解
2018/06/06 Python
python中cPickle类使用方法详解
2018/08/27 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python 中的[:-1]和[::-1]的具体使用
2020/02/13 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
EJB的几种类型
2012/08/15 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
社会学专业求职信
2014/02/24 职场文书
机关出纳岗位职责
2014/04/03 职场文书
年度考核个人总结
2015/03/06 职场文书
药店收银员岗位职责
2015/04/07 职场文书
Golang 遍历二叉树
2022/04/19 Golang