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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery编写QQ简易聊天框
Aug 27 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中上传大体积文件时需要的设置
2006/10/09 PHP
认识并使用PHP超级全局变量
2010/01/26 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
js Math 对象的方法
2013/09/01 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
JS功能代码集锦
2016/05/04 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python实现图片转字符画的示例
2017/08/22 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
python类共享变量操作
2020/09/03 Python
python3实现简单飞机大战
2020/11/29 Python
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
公积金转移接收函
2014/01/11 职场文书
期末自我鉴定
2014/01/23 职场文书
关于爱国的标语
2014/06/24 职场文书
2014年社区工作总结
2014/11/18 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书