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版的date函数(和PHP的date函数一样)
May 12 Javascript
JavaScript中的依赖注入详解
Mar 18 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
详解vue高级特性
Jun 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
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
Sephora丝芙兰马来西亚官方网站:国际化妆品购物
2018/03/15 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
人事主管岗位职责
2014/01/30 职场文书
社会实践活动总结报告
2014/04/29 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
民间借贷借条范本
2015/05/25 职场文书
公司员工培训管理制度
2015/08/04 职场文书
2016年记者节感言
2015/12/08 职场文书