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 相关文章推荐
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
jquery validate demo 基础
Oct 29 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
a标签调用js的方法总结
Sep 05 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
JavaScript ES6的函数拓展
Jan 18 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
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP5+UTF8多文件上传类
2008/10/17 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
2016/10/15 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python实现判断给定列表是否有重复元素的方法
2018/04/11 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
python http基本验证方法
2018/12/26 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
师范生实习的个人自我鉴定
2013/10/20 职场文书
新闻记者个人求职的自我评价
2013/11/28 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
2014年党务公开方案
2014/05/08 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
python脚本框架webpy模板控制结构
2021/11/20 Python
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL