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汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
js实现广告漂浮效果的小例子
Jul 02 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
js全选按钮的实现方法
Nov 17 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
Angular工具方法学习
Dec 26 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
概述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
一个oracle+PHP的查询的例子
2006/10/09 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python判断两个对象相等的原理
2017/12/12 Python
关于python写入文件自动换行的问题
2018/06/23 Python
详解Django的CSRF认证实现
2018/10/09 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
python从PDF中提取数据的示例
2020/10/30 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
就业推荐自我鉴定
2013/10/06 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
法人代表证明书
2014/09/18 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
教师个人成长总结
2015/02/11 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书