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中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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命令行脚本单进程运行的方法
2014/04/15 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
3款实用的在线JS代码工具(国外)
2012/03/15 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
Js实现自定义右键行为
2015/03/26 Javascript
React Router基础使用
2017/01/17 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
员工薪酬福利制度
2014/01/17 职场文书
丧事主持词大全
2014/04/02 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
2015年春节标语口号
2014/12/09 职场文书
留学推荐信怎么写
2015/03/26 职场文书
行政司机岗位职责
2015/04/10 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP