如何将焦点设置在 jquery 确认对话框上答案

【问题标题】：how to set focus on jquery confirm dialog如何将焦点设置在 jquery 确认对话框上
【发布时间】：2022-02-10 17:27:23
【问题描述】：

我有一个简单的 jquery 确认对话框，并希望将焦点设置在对话框本身而不是任何其他元素上。下面的代码是我做的重点：

function showAlert() {   

                $("#dialog-confirm").dialog({
                    title: 'Main Information',
                    resizable: false,
                    height:140,
                    modal: true,
                    closeOnEscape:true,
                    buttons: {        
                        "Yes": function() {
                            document.getElementById('form1:newProfile' ).value="true";
                            if(disableSaveFlag) return false; else disableEnableSaveBtn('true');
                               $( this ).dialog( "close" );
                        },
                        "No": function() {
                            document.getElementById('form1:newProfile' ).value="false";
                            if(disableSaveFlag) return false; else disableEnableSaveBtn('true');
                            $( this ).dialog( "close" );
                        }      
                    }    
                });
                 $("#dialog-confirm").focus(); // this line sets focus on div element with given id
            }

<div id="dialog-confirm" style="display:none">  
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
        Do you want to create a new profile ? 
    </p>
</div>

问题是我找不到对话框本身的“Id”来关注它。结果焦点被设置在 Div 元素上，而我的标题没有得到焦点。

下面是我用上面的代码得到的：

【问题讨论】：

“聚焦”一个 div 是什么意思？
焦点需要输入类型标签。一个按钮什么的。你不能聚焦一个 div。
@TheBrain Google "Javascript focus a div" - 你会得到我从未听说过的结果
我刚刚添加了一个屏幕截图，请参考它，所需的结果是第二个也显示了倾斜的结果。基本上我专注于我添加的用于显示我自己的文本的 div。如何关注由“.dialog”动态创建的外部 div....

标签： javascript jquery html

【解决方案1】：

只需按 Tab，它将聚焦对话框的第一个元素。

【讨论】：

我认为这个想法是找到一个 jquery 解决方案来避免这样做。另外，您将如何使用非输入元素执行此操作？
我有一个 Jquery 确认对话框，只有一个按钮（确定）在某些 ajax 函数之后进行确认。我还在寻找如何将焦点设置在按钮上，以便用户只需按“Enter”即可关闭它。按“Tab”对我有帮助，它直接聚焦按钮。如果有非输入元素，有没有重点关注？
我认为没有必要关注 div 元素，但这正是问题所要问的。

【解决方案2】：

我想我们可以专注于以下事件。我刚刚尝试过并且对我来说工作得很好..

onContentReady: function () {
    //select the element you want to focus here
    $(".btn-success").focus();
}

所以我的完整代码如下所示。在这种情况下，我将按钮集中在我的对话框上。

$.confirm({
    icon: "fas fa-check-square",
    title: "&nbsp;Completed!",
    content: "Action Plans Updated Successfully!",
    type: "green",
    typeAnimated: true
    buttons: {
    Complete: {
      text: "Complete",
      btnClass: "btn-success",
      action: function () {
        location.reload(true);
      },
    },
  },
  onContentReady: function () {
      $(".btn-success").focus();
  },
});

【讨论】：