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 22 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
js转换对象为xml
Feb 17 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue-iview动态新增和删除的方法
Jun 17 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 默默经典版本
2009/08/04 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python追加元素到列表的方法
2015/07/28 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
python pygame实现方向键控制小球
2019/05/17 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
英国灯具和灯泡网上商店:Lights.co.uk
2018/02/02 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
法定代表人授权委托书范文
2014/09/22 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
导游词之神仙居景区
2019/11/15 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL