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学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
Nov 17 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
vue 中filter的多种用法
Apr 26 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 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
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
Vue.js 2.0中select级联下拉框实例
2017/03/06 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
Python的Flask框架的简介和安装方法
2015/11/13 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python获取服务器响应cookie的实例
2018/12/28 Python
python的命名规则知识点总结
2019/10/04 Python
详解python如何引用包package
2020/06/07 Python
python 实用工具状态机transitions
2020/11/21 Python
Python非单向递归函数如何返回全部结果
2020/12/18 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
ORACLE十问
2015/04/20 面试题
家长给老师的道歉信
2014/01/13 职场文书
清明节演讲稿
2014/05/27 职场文书
爬山的活动方案
2014/08/16 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
2015年党建工作汇报材料
2015/06/25 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Python利用capstone实现反汇编
2022/04/06 Python