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 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
js实现简单商品筛选功能
Feb 02 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
ThinkPHP采用模块和操作分析
2011/04/18 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
浅析php过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
javascript顺序加载图片的方法
2015/07/18 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
layui的select联动实现代码
2019/09/28 Javascript
JS实现扫码枪扫描二维码功能
2020/01/03 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
django-初始配置(纯手写)详解
2019/07/30 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
总经理秘书岗位职责
2014/03/17 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python