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 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
javascript如何创建对象
Aug 29 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 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
php基于Snoopy解析网页html的方法
2015/07/09 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
jquery动态加载js三种方法实例
2013/08/03 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
利用JavaScript的Map提升性能的方法详解
2019/08/14 Javascript
Javascript Symbol原理及使用方法解析
2020/10/22 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python获取当前时间的方法
2014/01/14 Python
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
详解Python中的文本处理
2015/04/11 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
广告学毕业生求职信
2014/01/30 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
端午节活动策划方案
2014/03/09 职场文书
教师读书活动总结
2014/05/07 职场文书
质量管理标语
2014/06/12 职场文书
经济贸易系求职信
2014/08/04 职场文书
文艺晚会开场白
2015/05/29 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
P站美图推荐——变身女主角特辑
2022/03/20 日漫
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫