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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
vue-hook-form使用详解
Apr 07 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
浅谈react路由传参的几种方式
Mar 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+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
js 替换
2008/02/19 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
Node.js API详解之 V8模块用法实例分析
2020/06/05 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
Python3基础之输入和输出实例分析
2014/08/18 Python
python机器学习实战之K均值聚类
2017/12/20 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
TensorFlow Saver:保存和读取模型参数.ckpt实例
2020/02/10 Python
python中字典增加和删除使用方法
2020/09/30 Python
如何通过python计算圆周率PI
2020/11/11 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
初中政治教学反思
2014/01/17 职场文书
体育教学随笔感言
2014/02/24 职场文书
企业承诺书怎么写
2014/05/24 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android