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 无法通过W3C验证的处理方法
Mar 09 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
JS获取网页属性包括宽、高等等
Apr 03 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
js实现自定义路由
Feb 04 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 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
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
深入php list()函数的详解
2013/06/05 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
JavaScript的目的分析
2007/01/05 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
python统计一个文本中重复行数的方法
2014/11/19 Python
python追加元素到列表的方法
2015/07/28 Python
理解python正则表达式
2016/01/15 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
python修改FTP服务器上的文件名
2019/09/11 Python
python的列表List求均值和中位数实例
2020/03/03 Python
创联软件面试题笔试题
2012/10/07 面试题
应届毕业生个人求职信范文
2014/01/29 职场文书
《雪儿》教学反思
2014/04/17 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
小学课外阅读总结
2014/07/09 职场文书
MySQL注入基础练习
2021/05/30 MySQL