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 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 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 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP基础知识介绍
2013/09/17 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
js数组的操作详解
2013/03/27 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
JS自定义滚动条效果
2020/03/13 Javascript
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
高级文秘工作总结的自我评价
2013/09/28 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
文员岗位职责范本
2014/03/08 职场文书
销售总经理岗位职责
2014/03/15 职场文书
实验室的标语
2014/06/20 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
消费者理赔投诉书
2015/07/02 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android