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实现预览待上传的本地图片
Mar 15 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
Feb 11 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
详解小程序之简单登录注册表单验证
May 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
收音机的保养
2021/03/01 无线电
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
angular简介和其特点介绍
2015/01/29 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
详解Angularjs中的依赖注入
2016/03/11 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
vue中的过滤器及其时间格式化问题
2020/04/09 Javascript
python中遍历文件的3个方法
2014/09/02 Python
使用Python的PEAK来适配协议的教程
2015/04/14 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
html5 web本地存储将取代我们的cookie
2012/12/26 HTML / CSS
银行领导证婚词
2014/01/11 职场文书
运动会邀请函范文
2014/02/06 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
企业宣传标语
2014/06/09 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
springboot 多数据源配置不生效遇到的坑及解决
2021/11/17 Java/Android
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers