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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
js去除重复字符串两种实现方法
Jan 09 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
Mar 28 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
如何用JS实现简单的数据监听
May 06 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文件中是否含有bom的函数
2012/05/31 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
php实现映射操作实例详解
2019/10/02 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
2011/11/30 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
微信小程序实现一个简单swiper代码实例
2019/12/30 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
python微信公众号开发简单流程实现
2020/03/09 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
2016/05/17 HTML / CSS
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
说出数据连接池的工作机制是什么?
2013/04/19 面试题
干部现实表现材料
2014/02/13 职场文书
求职意向书范文
2014/04/01 职场文书
2015年教师国培感言
2015/08/01 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
升职自荐书
2019/05/09 职场文书
2019年中学生的思想品德评语集锦
2019/12/19 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android