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中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 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
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
IE php关于强制下载文件的代码
2008/08/23 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
javascript中异常处理案例(推荐)
2016/10/03 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
node.js使用http模块创建服务器和客户端完整示例
2020/02/10 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
python使用Image处理图片常用技巧分析
2015/06/01 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python多继承原理与用法示例
2018/08/23 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python JSON编解码方式原理详解
2020/01/20 Python
python如何快速生成时间戳
2020/07/21 Python
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
J2EE面试题大全
2016/08/06 面试题
八年级美术教学反思
2014/02/02 职场文书
绿色环保演讲稿
2014/05/10 职场文书
住房租房协议书
2014/08/20 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
团队拓展训练感想
2015/08/07 职场文书
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android