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 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jquery css实现流程进度条
Mar 26 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
jQuery实现穿梭框效果
Jan 19 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的五种设计模式
2012/09/05 PHP
编写php应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
thinkphp分页实现效果
2016/10/13 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
js实现收缩菜单效果实例代码
2013/10/30 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
python提取页面内url列表的方法
2015/05/25 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
python requests.get带header
2020/05/05 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
C语言如何决定使用那种整数类型
2016/11/26 面试题
公司股份转让协议书范本
2015/01/28 职场文书
环卫工作个人总结
2015/03/04 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL