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写的一个简易的投票
Nov 27 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
Aug 30 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
Oct 16 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
JS随机密码生成算法
Sep 23 Javascript
写一个Vue loading 插件
Nov 09 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
jQuery 过滤not()与filter()实例代码
2012/05/10 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
js根据后缀判断文件文件类型的代码
2020/05/09 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
Python内建模块struct实例详解
2018/02/02 Python
Python字典对象实现原理详解
2019/07/01 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python shelve模块实现解析
2019/08/28 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
python GUI计算器的实现
2020/10/09 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
华为慧通面试题
2012/09/11 面试题
单位承诺书格式
2014/05/21 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript