jQuery Dialog 打开时自动聚焦的解决方法(两种方法)


Posted in Javascript onNovember 24, 2016

下面给大家介绍两种方法解决jQuery Dialog 打开时自动聚焦问题。具体实现方法大家可以参考下本文。

方法一:

p1_dialog_seniorSearch.dialog({ 
title:"高级查询", 
autoOpen:false,//默认关闭 
modal: true,//开启遮罩层 
width:570, 
height:330, 
buttons: { 
"查询":function(){ 
seniorSearch(1,20) 
} , 
"关闭": function() { 
p1_dialog_seniorSearch.dialog( "close" ); 
} 
}, 
open:function(event, ui){ 
$(this).parent().focus(); 
}//取消获取焦点 
});

方法二:

在要焦点的的控件加上 autofocus

如:第一个控件为 datepicker,默认dialog打开会自动弹出日历

解决:在该dialog加个隐藏input,

<input type="hidden" autofocus/>

未加 autofocus,dialog不会聚焦影藏的input的。

PS: jquery dialog打开的时候,自动聚焦在第一个控件上

在做项目的时候,用到jQuery dialog,在dialog(“open”)一个页面的时候,焦点会自动聚焦到第一个控件上,刚好这个控件绑定了datepicker,就把日历自动弹出来了,纠结半天无果,google了一下,有人也遇到同样的问题。先给出解决方案

<input autofocus> 在标签上加一个autofocus属性就能给指定的控件获取焦点。比如第一个是日期控件,那么把这个属性加到其他标签上去,第一个日历控件就不会聚焦,也就不会弹出来了。话说回来,这个方法有点类似于障眼法。

附上解决问题的网址:

http://stackoverflow.com/questions/1202079/prevent-jquery-ui-dialog-from-setting-focus-to-first-textbox

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

以上所述是小编给大家介绍的jQuery Dialog 打开时自动聚焦的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js优化针对IE6.0起作用(详细整理)
Dec 25 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
Mar 10 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 #Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 #Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 #Javascript
值得分享的Bootstrap Table使用教程
Nov 23 #Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 #Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 #Javascript
移动开发之自适应手机屏幕宽度
Nov 23 #Javascript
You might like
一个简易需要注册的留言版程序
2006/10/09 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
整理Python中的赋值运算符
2015/05/13 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python实现求笛卡尔乘积的方法
2017/09/16 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Django权限设置及验证方式
2020/05/13 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
关于.NET, HTML的五个问题
2012/08/29 面试题
日期和时间问题
2015/01/04 面试题
二年级数学教学反思
2014/01/21 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
辛亥革命观后感
2015/06/02 职场文书
2016小学新学期寄语
2015/12/04 职场文书