jQuery UI Dialog focus 事件

对话框是通知用户一些事情的方式。它是一种很好的方式，可以在用户窗口上弹出，显示接下来要发生的信息或任何一种开发者想要澄清的信息给用户知道。它有一个标题栏和一个内容区，可以移动，调整大小，并默认使用 “X “图标关闭。当对话框获得焦点时，会触发焦点事件。

语法:

$(".selector").dialog (
   focused: function( event, ui ) {
       console.log('focused')
   },

CDN链接：首先，添加你的项目需要的jQuery Mobile脚本。

<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel =”stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

示例 1:

打开对话框 “按钮将触发点击功能（#gfg），该功能将进一步打开对话框（#gfg2）中的 “文本区域”。
focus( event, ui )。触发框获得焦点。这个焦点有一个回调函数。
event : Type -> Event
ui : Type -> Object
callback : function( event, ui ) { console.log(‘focused’)}。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link href=
"https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
      rel="stylesheet"/>
    <script src=
"https://code.jquery.com/jquery-1.10.2.js">
    </script>
    <script src=
"https://code.jquery.com/ui/1.10.4/jquery-ui.js">
    </script>
    <script type="text/javascript">
       $(function () {$ ("#gfg2").dialog({
          autoOpen: false,
          focus: function (event, ui) {
            console.log("focused");
          },
        });
         $("#gfg").click(function () {$ ("#gfg2").dialog("open");
        });
      });
    </script>
  </head>
  <body>
    <div id="gfg2" title="GeeksforGeeks">
      <textarea>jQuery UI | focus(event, ui) Event</textarea>
    </div>
    <button id="gfg">Open Dialog</button>
  </body>
</html>

输出:

jQuery UI Dialog focus 事件