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 读后台cookie代码
Sep 15 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
JavaScript仿京东秒杀倒计时
Mar 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怎么实现网站保存快捷方式方便用户随时浏览
2013/08/15 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
2015/08/26 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
2017/10/09 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
Python算法之图的遍历
2017/11/16 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
开业庆典主持词
2014/03/21 职场文书
分公司负责人任命书
2014/06/04 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
神农溪导游词
2015/02/11 职场文书
金陵十三钗观后感
2015/06/04 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
Java Socket实现多人聊天系统
2021/07/15 Java/Android