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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
简介JavaScript中Math.cos()余弦方法的使用
Jun 15 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
JavaScript接口实现方法实例分析
May 16 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函数method_exists()与is_callable()的区别
2013/06/21 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
php微信支付之APP支付方法
2015/03/04 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
JavaScript操作Oracle数据库示例
2015/03/06 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
解决bootstrap-select 动态加载数据不显示的问题
2018/08/10 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
公司人力资源的自我评价
2014/01/02 职场文书
毕业证丢失证明
2014/01/15 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
会计专业自荐书
2014/07/08 职场文书
2015年数学教师工作总结
2015/05/20 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
如何用python插入独创性声明
2021/03/31 Python