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 实现回车登录详解及实例代码
  • jQuery实现当按下回车键时绑定点击事件
  • jQuery实现回车键（Enter）切换文本框焦点的代码实例
  • jQuery回车实现登录简单实现
  • jquery按回车键实现表单提交的简单实例
赞 (0)

相关推荐

  • jQuery实现回车键（Enter）切换文本框焦点的代码实例

    以下是实现方法: 复制代码 代码如下: <script src="http://yige.org/static/js/j.js"></script>jQuery(function () {    jQuery('input:text:first').focus();//直接定位到当前页面的第一个文本框    var $inp = jQuery('input:text');//所有文本框    $inp.bind('keydown', function (e) {

  • jquery 实现回车登录详解及实例代码

    jquery 实现回车登 1.button按钮提交方式 //按钮事件 $('#btnSumit').click(function() { alert('测试'); }); //回车提交事件 $("body").keydown(function() { if (event.keyCode == "13") {//keyCode=13是回车键 $('#btnSumit').click(); } }); 2.form表单提交方式 a.使用jquery $("bo

  • jQuery回车实现登录简单实现

    复制代码 代码如下: login_form为表单ID名.这里只是实现回车表单提交 $("#login_form").keypress(function(e) { if (e.which == 13) { $("#login_form").submit(); } }); $(window).keydown(function (e) { if (e.which == 13) { return false; } })

  • jQuery实现当按下回车键时绑定点击事件

    当按下回车键时,绑定按钮点击事件代码如下,通过检测按下的键值,回车键keycode为13,判断是否是回车键,然后完成相应的方法. 复制代码 代码如下: <script> $(function(){ $(document).keydown(function(event){ if(event.keyCode==13){ $("#mouse").click(); } }); $("#mouse").click(function(){ alert("n

  • jquery按回车键实现表单提交的简单实例

    本文章在给大家介绍在用户输入完信息之后直接按回车进行表单提交的jquery实现方法,有需要了解的朋友可进来参考以. 键盘事件有3: jquery键盘事件参考: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 正确代码为: $(document).keyup(function(event){ if(

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

    最近在做项目登录时,每次都需要点击登录按钮才可以进入相应的页面,给用户一个很不好的体验,所以我就添加使用回车键来实现登录. 方法: <form> <input type="text" id="username_txt" placeholder="用户名" /> <input type="password" id="userpass_txt" placeholder="

  • jquery实现鼠标拖拽滑动效果来选择数字的方法

    本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • jQuery删除一个元素后淡出效果展示删除过程的方法

    本文实例讲述了jQuery删除一个元素后淡出效果展示删除过程的方法.分享给大家供大家参考.具体分析如下: 当我们删除一个元素时希望能看到删除的过程,这个效果通过对元素进行淡出展示动态化删除过程. $("#myButton").click(function() { $("#myDiv").fadeTo("slow", 0.01, function(){//fade $(this).slideUp("slow", function

  • jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)

    弹出层主要用于展示丰富的页面信息,还有一个更好的应用是弹出表单层丰富交互应用.常见的应用有弹出登录表单层,用户提交登录信息,后台验证登录成功后,弹出层消失,主页面局部刷新用户信息.本文我们将给大家介绍如何使用jQuery+Ajax+PHP弹出层异步登录的应用. 效果展示        源码下载 HTML 由于本例UI部分使用了Bootstrap,以及使用jQuery插件,因此需要事先载入相关文件,推荐大家使用相关的CDN资源. <link rel="stylesheet" hre

  • 基于jquery实现左右按钮点击的图片切换效果

    基于jquery实现左右按钮点击的图片切换效果

    jQuery可以制作出与Flash媲美的动画效果,这点绝对毋庸置疑,本文将通过实例演示一个左右按钮点击的图片切换效果. 一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮都显示. 2.html结构分析 <div class="activity" id="activity-slide"> <a href

  • JQuery点击事件回到页面顶部效果的实现代码

    JQuery点击事件回到页面顶部效果的实现代码 //2个div,点击某个时回到顶部 <div style="height:1000px">111111111111111</div> <div id="top" >top</div> <引用JQuery> <script type="text/javascript"> $(function(){ $("#top&quo

  • 基于jQuery插件实现点击小图显示大图效果

    基于jQuery插件实现点击小图显示大图效果

    本文实例为大家分享了基于jQuery实现点击小图显示大图效果,供大家参考,具体内容如下 显示以下效果: 点击任意一张图片会显示大图: 1.前台界面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="练习.WebForm1" %> <!DOCTYPE html PUBLIC "-/

  • jQuery实现点击旋转，再点击恢复初始状态动画效果示例

    jQuery实现点击旋转，再点击恢复初始状态动画效果示例

    本文实例讲述了jQuery实现点击旋转,再点击恢复初始状态动画效果.分享给大家供大家参考,具体如下: 今天遇到要做一个点击 + 然后开始旋转动画后变成 x    具体实现如下 1.HTML <div class="box rotate"></div> <!--需要加一个初始状态--> 2.CSS .box{ //普通样式 width:100px; height:100px; background:skyblue; } .rotate1{ //旋转后的

  • jQuery+AJAX实现遮罩层登录验证界面（附源码）

    jQuery+AJAX实现遮罩层登录验证界面（附源码）

    JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显

  • jquery点击缩略图切换视频播放特效代码分享

    jquery点击缩略图切换视频播放特效代码分享

    本文实例讲述了jquery点击缩略图切换视频播放特效.分享给大家供大家参考.具体如下: jquery点击缩略图切换视频播放是一款非常实用的播放代码,点击视频缩略图切换优酷视频播放的视频播放选项卡代码,支持flash视频切换选项卡. 运行效果图:      -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery点击缩略图切换视频播放特效代码如下 <!DOCTYPE html

随机推荐