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


Posted in jQuery onMarch 09, 2018

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

方法:

<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 UI Grid 模态框中的表格实例代码
Apr 01 jQuery
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
JQuery选中select组件被选中的值方法
Mar 08 #jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP 编程安全性小结
2010/01/08 PHP
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
压缩包密码破解示例分享(类似典破解)
2014/01/17 Python
python 出现SyntaxError: non-keyword arg after keyword arg错误解决办法
2017/02/14 Python
windows下python连接oracle数据库
2017/06/07 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python实现机器学习之多元线性回归
2018/09/06 Python
python生成器与迭代器详解
2019/01/01 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
CSS3新增布局之: flex详解
2020/06/18 HTML / CSS
艺术用品:Arteza
2018/11/25 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
环境卫生整治简报
2015/07/20 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
Go 语言中 20 个占位符的整理
2021/10/16 Golang