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 学习笔记(一)DOM基本操作
Apr 08 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
浅谈javascript的调试
Jan 28 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 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 分页类代码
2008/11/13 PHP
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十三)
2014/06/26 PHP
php实现无限级分类
2014/12/24 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
javascript定时保存表单数据的代码
2011/03/17 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
防止重复发送 Ajax 请求
2017/02/15 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
详解如何提升JSON.stringify()的性能
2019/06/12 Javascript
原生JS实现留言板
2020/03/26 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python自动生成model文件过程详解
2019/11/02 Python
python requests.get带header
2020/05/05 Python
python如何绘制疫情图
2020/09/16 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
危货运输企业安全生产责任书
2014/07/28 职场文书
入党积极分子学习优秀共产党员先进事迹思想汇报
2014/09/13 职场文书
个人股份合作协议书
2014/10/24 职场文书
营运督导岗位职责
2015/04/10 职场文书
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL
源码安装apache脚本部署过程详解
2022/09/23 Servers