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 29 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 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提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
php二维码生成
2015/10/19 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
vue实现计步器功能
2019/11/01 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
Django rest framework工具包简单用法示例
2018/07/20 Python
python递归法解决棋盘分割问题
2019/07/17 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python基础教程之while循环
2019/08/14 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
Spartoo西班牙官网:法国时尚购物网站
2018/03/27 全球购物
青春无悔演讲稿
2014/05/08 职场文书
体育教师个人总结
2015/02/09 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书