jquery点击回车键实现登录效果并默认焦点的方法

 更新时间:2018年03月09日 15:44:20   作者:木雷双雄7  
下面小编就为大家分享一篇jquery点击回车键实现登录效果并默认焦点的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

最近在做项目登录时,每次都需要点击登录按钮才可以进入相应的页面,给用户一个很不好的体验,所以我就添加使用回车键来实现登录。

方法:

<form> 
<input type="text" id="username_txt" placeholder="用户名" />
<input type="password" id="userpass_txt" placeholder="密码" />
    <button id="login_btn">登录</button>
</form>
$(function () { 
$('#username_txt').focus();
    //用户点击按钮
    $("#login_btn").click(function () {
    //获取用户名
    var username = $('#username_txt').val();
    //获取密码
    var userpass = $('#userpass_txt').val();
     if (username == "" || userpass == "") { alert("用户名密码不能为空!"'); }
    else {
//调用登录方法
        $.ajax({
           
 });
 }
 });
$("body").keydown(function(event) {
 if (event.keyCode == "13") {//keyCode=13是回车键
$("#login_btn").click();
 }
}); 
});

最终效果图:

以上这篇jquery点击回车键实现登录效果并默认焦点的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jQuery.validate 常用方法及需要注意的问题

    jQuery.validate 常用方法及需要注意的问题

    jQuery.validate 常用方法及需要注意的问题,需要的朋友可以参考一下
    2013-03-03
  • jQuery事件与动画基础详解

    jQuery事件与动画基础详解

    本文主要介绍了jQuery事件与动画的基础知识,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 将JavaScript的jQuery库中表单转化为JSON对象的方法

    将JavaScript的jQuery库中表单转化为JSON对象的方法

    这篇文章主要介绍了将JavaScript的jQuery库中表单转化为JSON对象的方法,包括对序列化时空格问题的处理方法,需要的朋友可以参考下
    2015-11-11
  • jquery实现简单的无缝滚动

    jquery实现简单的无缝滚动

    这里给大家分享的是使用jQuery实现简单的无缝滚动的效果,其思路是我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;,有需要的小伙伴可以参考下。
    2015-04-04
  • jQuery mobile转换url地址及获取url中目录部分的方法

    jQuery mobile转换url地址及获取url中目录部分的方法

    这篇文章主要介绍了jQuery mobile转换url地址及获取url中目录部分的方法,转换url地址本文中介绍的是将相对url转化为绝对url,需要的朋友可以参考下
    2015-12-12
  • jQuery实现立体式数字滚动条增加效果

    jQuery实现立体式数字滚动条增加效果

    这篇文章主要介绍了jQuery立体式数字滚动条增加的相关资料,代码简单易懂,非常不错,需要的朋友可以参考下
    2016-12-12
  • jQuery中toggle()函数的使用实例

    jQuery中toggle()函数的使用实例

    关于jQuery中的toggle()函数,相信大家都非常的了解,网上也有许多的相关教程,今天要给大家分享的是在实际的项目中toggle()的使用方法,需要的小伙伴可以参考下。
    2015-04-04
  • jQuery prev ~ siblings选择器使用介绍

    jQuery prev ~ siblings选择器使用介绍

    正如标题所言其所用为匹配 prev 元素之后的所有 siblings 元素,下面为大家分享个示例,不了解的朋友可以学习下
    2013-08-08
  • 收集的10个免费的jQuery相册

    收集的10个免费的jQuery相册

    或许在网络上你已经见过数百种通过jQuery实现的相册,但是我们发现的这些相册,他们有额外的东西,优雅和独特的创意!每个相册都是可在线预览和免费下载的。你可以为你的Web项目添加色彩。
    2011-02-02
  • jquery入门—访问DOM对象方法

    jquery入门—访问DOM对象方法

    本文着重介绍:JavaScript访问DOM对象方法/JQuery访问DOM对象方法,通过JQuery库中的方法访问或控制页面中的元素,比使用JavaScript代码要简洁得多,而且兼容各浏览器,感兴趣的朋友可以了解下
    2013-01-01

最新评论