files/zh-cn/web/api/document/hasfocus/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

---
title: document.hasFocus
slug: Web/API/Document/hasFocus
tags:
  - API
  - DOM
  - 参考
  - 方法
  - 焦点
translation_of: Web/API/Document/hasFocus
---
<p>{{ ApiRef }}</p>

<h3 id="Summary" name="Summary">概述</h3>

<p><code><strong>Document.hasFocus()</strong></code> 方法返回一个 {{jsxref("Boolean")}}，表明当前文档或者当前文档内的节点是否获得了焦点。该方法可以用来判断当前文档中的活动元素是否获得了焦点。</p>

<div class="note">当查看一个文档时，当前文档中获得焦点的元素一定是当前文档的活动元素，但一个文档中的活动元素不一定获得了焦点.。例如， 一个在后台的窗口中的活动元素一定没有获得焦点。</div>

<h3 id="Syntax" name="Syntax">语法</h3>

<pre class="eval">focused = document.hasFocus();
</pre>

<h4 id="返回值">返回值</h4>

<p>如果当前文档的活动元素获得了焦点，返回<code> true</code>，否则返回false。</p>

<h3 id="Example" name="Example">例子</h3>

<pre class="brush: js">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;style type='text/css'&gt;
    #message { font-weight: bold; }
  &lt;/style&gt;

&lt;script type='text/javascript'&gt;
      setInterval("CheckPageFocus()", 200);

      function CheckPageFocus() {
            var info = document.getElementById("message");
           if (document.hasFocus()) {
             info.innerHTML = "该页面获得了焦点.";
            }
            else {
             info.innerHTML = "该页面没有获得焦点.";
           }
      }

    function OpenWindow() {
           window.open ("<a href="http://developer.mozilla.org/">http://developer.mozilla.org/</a>", "mozdev",
                     "width=640, height=300, left=150, top=260");
    }
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
 document.hasFocus 演示&lt;br /&gt;&lt;br /&gt;
&lt;div id="message"&gt;等待用户操作&lt;/div&gt;&lt;br /&gt;
&lt;button onclick="OpenWindow()"&gt;打开一个新窗口&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h3 id="浏览器兼容性"><span>浏览器兼容性</span></h3>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("1.9") }}</td>
   <td>6.0</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1.9") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Specification" name="Specification">规范</h3>

<ul>
 <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></li>
</ul>

<p>{{ languages( { "en": "en/DOM/document.hasFocus","es": "es/DOM/element.hasFocus", "fr": "fr/DOM/document.hasFocus", "ja": "ja/DOM/document.hasFocus", "pl": "pl/DOM/document.hasFocus" } ) }}</p>