jquery-ui弹窗自动打开第一个input问题

laker 1年前 ⋅ 423 阅读

背景

最近在维护一个老项目,其中前端页面是使用的jQuery-ui。本次功能是在一个弹窗dialog中添加一个日期元素。

问题描述

jQuery-ui有一个机制,就是让dialog中的第一个tabbable元素获取焦点,而我这里第一个元素日期控件,所以导致每次打开弹窗,日期控件就自动打开了。而本需求不需要这样的场景的。

我的jqeury-ui版本1.8.22

解决办法

网上搜到了好多解决方案,实际验证发现大多不可行。心急的可以直接拖到最下面看结果。

  1. dialog中添加open方法,不可行。
p1_dialog_seniorSearch.dialog({
    open:function(event, ui){
        $(this).parent().focus();
    }//取消获取焦点
});
  1. 在页面打开之后使第一个元素失去焦点,不可行。

firstElement.blur();

  1. 修改jQuery-ui源码,不可行

注释下面一句, hasFocus.eq( 0 ).focus();//设置弹出框中第一个文本框自动获得焦点

  1. 第三个解决办法中的代码根本就没有找到,怀疑是jQuery-ui版本不同导致的,所以就到jquery-ui源码中找了一下,果然不一样,我注释了下面代码之后就正常了。
// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
// $(self.element.find(':tabbable').get().concat(
// 	uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
// 		uiDialog.get()))).eq(0).focus();

全部评论: 0

    我有话说: