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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
vue 组件内获取actions的response方式
Nov 08 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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
德生H-501的评价与改造
2021/03/02 无线电
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
Ext 今日学习总结
2010/09/19 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
js实现录音上传功能
2019/11/22 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
python中去空格函数的用法
2014/08/21 Python
python根据路径导入模块的方法
2014/09/30 Python
Python素数检测实例分析
2015/06/15 Python
python+logging+yaml实现日志分割
2019/07/22 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
全球酒店比价网:HotelsCombined
2017/06/20 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
中英文求职信范文
2014/01/27 职场文书
倡议书格式范文
2014/04/14 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
大明湖导游词
2015/02/03 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
朋友离别感言
2015/08/04 职场文书
提档介绍信范文
2015/10/22 职场文书