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 toFixed()方法的重写实现精度的统一
Mar 06 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
详解Bootstrap插件
Apr 25 Javascript
bootstrap table实例详解
Jan 06 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
May 03 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
原生JavaScript实现换肤
Feb 19 Javascript
Javascript之datagrid查询详解
Sep 15 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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数组输出html表格的方法
2014/02/24 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
jQuery EasyUI提交表单验证
2016/07/19 Javascript
JS作用域深度解析
2016/12/29 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
python读取各种文件数据方法解析
2018/12/29 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python解析多层json操作示例
2019/12/30 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
应届生求职信写作技巧
2013/10/24 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
美术社团活动总结
2014/06/27 职场文书
焦裕禄精神心得体会
2014/09/02 职场文书
党员个人总结自评
2015/02/14 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
Java设计模式之代理模式
2022/04/22 Java/Android
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技