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 event事件在IE、FF兼容性问题
Jan 01 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
javascript面向对象创建对象的方式小结
Jul 29 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
CI框架的安全性分析
2016/05/18 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
详解javascript传统方法实现异步校验
2016/01/22 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
javascript遍历json对象的key和任意js对象属性实例
2017/03/09 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
Python中的sort()方法使用基础教程
2017/01/08 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
python分析作业提交情况
2017/11/22 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
单位消防安全制度
2014/01/12 职场文书
公司活动策划方案
2014/01/13 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
美丽的大脚观后感
2015/06/03 职场文书
城南旧事观后感
2015/06/11 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书
python读取mat文件生成h5文件的实现
2022/07/15 Python