如何在对话框打开时模糊第一个表单输入

Posted 2023-05-07

【中文标题】如何在对话框打开时模糊第一个表单输入

【英文标题】：How to blur the first form input at the dialog opening

【发布时间】：2011-07-22 01:08:32

【问题描述】：

我有一个显示表单的 jQuery.dialog。 第一个输入是<input type="text" class="datepicker" />，我像jQuery('.datepicker').datepicker() 这样初始化日期选择器。

问题是当对话框打开时，它会聚焦第一个输入。所以日期选择器也被打开了。

对话框的事件open 在焦点出现之前运行。

那么，我怎样才能将第一个焦点模糊到 datepicker 保持隐藏状态？

【参考方案1】：

从 jQuery UI 1.10.0 开始，您可以使用 HTML5 属性选择要聚焦的输入元素 autofocus。

您所要做的就是创建一个虚拟元素作为您在对话框中的第一个输入。 它会为你吸收焦点。

<input type="hidden" autofocus="autofocus" />

这已于 2013 年 2 月 7 日在 Chrome、Firefox 和 Internet Explorer（所有最新版本）中进行了测试。

http://jqueryui.com/upgrade-guide/1.10/#added-ability-to-specify-which-element-to-focus-on-open

【参考方案2】：

如前所述，这是 jQuery UI 的一个已知错误，应该很快就会修复。到那时……

这是另一种选择，因此您不必乱用 tabindex：

暂时禁用日期选择器，直到对话框打开：

dialog.find(".datepicker").datepicker("disable");
dialog.dialog(
    "open": function() $(this).find(".datepicker").datepicker("enable");,
);

为我工作。

【讨论】：

这是我解决问题所需的方向。最后，我还必须在对话框的关闭功能上添加 datepicker("disable")。这可以防止在随后打开对话框后再次出现该问题。

【参考方案3】：

根据接受的答案here，这是open issue，带有jQuery UI“核心”。按照那里的建议，尝试将选项卡索引 -1 设置为文本框。

【参考方案4】：

我过去也遇到过同样的问题，我是这样解决的：

 function CreateDialog(divWindow) 
        divWindow.dialog(
            
                title: "Generate Voyages",
                autoOpen: false,
                modal: true,
                width: 'auto',
                height: 'auto',
                zIndex: -1000,
                resizable: false,
                close: function() 
                    $(this).dialog('destroy');
                    $('#ui-datepicker-div').hide();
                ,               
                    "Cancel": function() 
                        $(this).dialog("close");
                        $('#ui-datepicker-div').hide();
                    
                
            );
    

function DisplayWindow(divWindow) 
        divWindow.show()
        divWindow.dialog("open");                

        var datePicker = $('#ui-datepicker-div');

        var textBoxes = $('input[id^="Generate"]');

        datePicker.css('z-index', 10000);

        textBoxes.blur();
    

【讨论】：

只需添加文本框，在这种情况下，就是实现我的日期选择器的文本框。只需在打开对话框后设置框的 zindex 并在之后模糊它们。

【参考方案5】：

$('.datepicker').blur();

这只会像使用一样触发模糊功能，因此日期选择器会隐藏。

问题可能是因为您将脚本中某处的文档加载重点放在了第一个元素上。所以要么尝试删除该选项，要么在文档加载时添加上述行:)

【讨论】：

对话框打开时自动。我找到了解决方案，我很快就会发布它

@canardman：我并没有冒犯你的意思，但介意你告诉我们为什么你一直发布问题只是为了以后自己回答？如果这个问题可以通过更多的工作或研究来解决，为什么你发布它只是为了投票你自己的答案是正确的？我检查了你的大多数问题，你就是这样做的。

@hallaghan 哈哈，他是说我的方式或高级方式的开发人员之一，:) @canardman 我知道它是自动的，我希望有一个代码可以触发它的焦点

@hallaghan @Val 不是我的方式，但你是对的，不幸的是，在某些帖子中，我无法解决我的问题。所以当我找到解决它的方法时，我分享它。但可以肯定的是，如果有人提出更好的解决方案，我会很乐意学习它。这就是我在这里发帖的原因，我想了解和学习。

【参考方案6】：

我必须在打开对话框之前禁用日期选择器并在打开时启用它。但是，如果您在关闭时不禁用它，则在初始打开后问题会再次出现。

$(document).ready(function () 
    var dialog;

    $("#date").datepicker();
    $("#date").datepicker("disable");

    dialog = $("#dialog-form").dialog(
        autoOpen: false,
        height: "auto",
        width: "auto",
        modal: true,
        buttons: 
            "Create note": function () 
                $("#noteForm").submit();
            ,
            Cancel: function () 
                dialog.dialog("close");
            
        ,
        open: function() 
            $("#date").datepicker("enable");
        ,
        close: function () 
            $("#noteForm")[0].reset();
            $("#date").datepicker("disable");
        
    );

    $("#create-note").button().on("click", function () 
        dialog.dialog('open');
        $("#time").focus();
    );

);