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 相关文章推荐
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
使用vue制作FullPage页面滚动效果
Aug 21 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 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购物车实现代码
2011/10/10 PHP
PHP 代码规范小结
2012/03/08 PHP
php json与xml序列化/反序列化
2013/10/28 PHP
通过Email发送PHP错误的方法
2015/07/20 PHP
php生成二维码
2015/08/10 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
python实现的简单猜数字游戏
2015/04/04 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
四种会话跟踪技术
2015/05/20 面试题
《鸟的天堂》教学反思
2014/02/27 职场文书
执行力心得体会范文
2016/01/11 职场文书
经销商会议开幕词
2016/03/04 职场文书