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 相关文章推荐
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
JavaScript获取GridView选择的行内容
Apr 14 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
Jquery遍历checkbox获取选中项value值的方法
Feb 13 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
基于javascript实现数字英文验证码
Jan 25 Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
vue实现倒计时功能
Mar 24 Vue.js
在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快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
再谈javascript面向对象编程
2012/03/18 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
2019/05/17 Javascript
[01:12]DOTA2 2015年秋季互动指南
2015/11/10 DOTA
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
pycharm安装图文教程
2017/05/02 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Python接口测试环境搭建过程详解
2020/06/29 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
服务宗旨标语
2014/07/01 职场文书
学校教研活动总结
2014/07/02 职场文书
党员个人剖析材料
2014/09/30 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
大学入学感言
2015/08/01 职场文书
详解Python类和对象内容
2021/06/22 Python