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实现简单的抽奖游戏
May 05 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
详解jQuery中的prop()使用方法
Jan 05 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery实现雪花飘落效果
Aug 02 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jquery实现拖拽小方块效果
Dec 10 jQuery
jQuery实现购物车全功能
Jan 11 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
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
js 函数的副作用分析
2011/08/23 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
详解Angular5 服务端渲染实战
2018/01/04 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
django输出html内容的实例
2018/05/27 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
施工安全汇报材料
2014/08/17 职场文书
2015年共青团工作总结
2015/05/15 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书