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 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
jquery实现通用版鼠标经过淡入淡出效果
Jun 15 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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 广告调用类代码(支持Flash调用)
2011/08/11 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
jQuery 判断元素上是否绑定了事件
2009/10/28 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
js转html实体的方法
2016/09/27 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
微信小程序文章列表功能完整实例
2020/06/03 Javascript
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
Python3 操作 MySQL 插入一条数据并返回主键 id的实例
2020/03/02 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
英国名牌男装店:Standout
2021/02/17 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
资源工程专业毕业生求职信
2014/02/27 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
酒店节能降耗方案
2014/05/08 职场文书
就业协议书范本
2014/10/08 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
java实现web实时消息推送的七种方案
2022/07/23 Java/Android