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 11 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 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
一个捕获函数输出的函数
2007/02/14 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
摘自百度的图片轮换效果代码
2007/11/19 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
2016/10/13 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python实现一个转存纯真IP数据库的脚本分享
2017/05/21 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python简单实现AES加密和解密
2019/03/28 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
求职自我评价怎么写
2015/03/09 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
Nginx源码编译安装过程记录
2021/11/17 Servers
详解pytorch创建tensor函数
2022/03/22 Python
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android