aboutsummaryrefslogtreecommitdiff
path: root/files/pt-br/web/api/document/hasfocus/index.html
blob: 0d238ec062fda1916563e2199796210a3dd01ebd (plain)
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
---
title: Document.hasFocus()
slug: Web/API/Document/hasFocus
tags:
  - API
  - Compatibilidade
  - DOM
  - Focus
  - Referencia
  - metodo
translation_of: Web/API/Document/hasFocus
---
<div>{{APIRef}}</div>

<div>O método <code><strong>Document.hasFocus()</strong></code> retorna um valor {{jsxref("Boolean")}} que indica se o documento ou qualquer elemento dentro do documento está com o foco ativo. Este método pode ser usado para determinar se o elemento ativo em um documento tem foco.</div>

<div class="note">
<p>Quando se está visualizando um documento, um elemento com focus é sempre o ativo no mesmo, mas um elemento ativo não necessariamente tem o foco. Por exemplo, um elemento ativo com uma janela (popup) que não é a principal não tem foco.</p>
</div>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

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

<h3 id="Valor_retornado">Valor retornado</h3>

<p><code>false</code> se o elemento ativo no documento não tem foco; <code>true</code> se o elemento ativo no documento tem foco.</p>

<h2 id="Example" name="Example">Exemplo</h2>

<pre class="brush:html;highlight:[17]">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt;TEST&lt;/title&gt;
&lt;style&gt;
#message { font-weight: bold; }
&lt;/style&gt;
&lt;script&gt;
setInterval( checkPageFocus, 200 );

function checkPageFocus() {
  var info = document.getElementById("message");

  if ( document.hasFocus() ) {
    info.innerHTML = "O documento tem o foco.";
  } else {
    info.innerHTML = "O documento não tem o foco.";
  }
}

function openWindow() {
  window.open (
    "http://developer.mozilla.org/",
    "mozdev",
    "width=640,
    height=300,
    left=150,
    top=260"
  );
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1&gt;Exemplo do JavaScript hasFocus&lt;/h1&gt;
  &lt;div id="message"&gt;Esperando por ação do usuário&lt;/div&gt;
  &lt;div&gt;&lt;button onclick="openWindow()"&gt;Abre uma nova janela&lt;/button&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<h2 id="Specification" name="Specification">Especificação</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-hasfocus', 'Document.hasFocus()')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Funcionalidade</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>30</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>Funcionalidade</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1.9") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="sect1"> </h2>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">Usando a API de Page Visibility</a></li>
</ul>