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
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jQuery实现放大镜案例
Oct 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 json与xml序列化/反序列化
2013/10/28 PHP
php中动态调用函数的方法
2015/03/16 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
按给定几率进行随机抽取的js代码
2010/12/28 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
JQuery 控制内容长度超出规定长度显示省略号
2014/05/23 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
JavaScript 基本概念
2015/01/20 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
Vue.use源码分析
2017/04/22 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
Python简易版停车管理系统
2019/08/12 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python不同版本的_new_不同点总结
2020/12/09 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
戴森英国官网:Dyson英国
2019/05/07 全球购物
酒店总经理职务说明书
2014/02/26 职场文书
竞选学习委员演讲稿
2014/09/01 职场文书
地道战观后感2000字
2015/06/04 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
导游词之任弼时故居
2020/01/07 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
Pytorch中的数据集划分&正则化方法
2021/05/27 Python