Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 821517 of Document.hasFocus()

  • Revision slug: Web/API/Document/hasFocus
  • Revision title: Document.hasFocus()
  • Revision id: 821517
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment Added sidebar

Revision Content

{{APIRef}}
The Document.hasFocus() method returns a {{jsxref("Boolean")}} value indicating whether the document or any element inside the document has focus. This method can be used to determine whether the active element in a document has focus.

When viewing a document, an element with focus is always the active element in the document, but an active element does not necessarily have focus. For example, an active element within a (popup) window that is not the foreground has no focus.

Syntax

focused = document.hasFocus();

Return value

false if the active element in the document has no focus; true if the active element in the document has focus.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<style>
#message { font-weight: bold; }
</style>

<script>

setInterval( CheckPageFocus, 200 );

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

  if ( document.hasFocus() ) {
    info.innerHTML = "The document has the focus.";
  } else {
    info.innerHTML = "The document doesn't have the focus.";
  }
}

function OpenWindow() {
  window.open (
    "https://developer.mozilla.org/",
    "mozdev",
    "width=640,
    height=300,
    left=150,
    top=260"
  );
}

</script>
</head>

<body>
  <h1>JavaScript hasFocus example</h1>
  <div id="message">Waiting for user action</div>
  <div><button onclick="OpenWindow()">Open a new window</button></div>
</body>
</html>

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 30 {{ CompatGeckoDesktop("1.9") }} 6.0 {{ CompatNo() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1.9") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }}

Specification

See also

Revision Source

<div>{{APIRef}}</div>

<div>The <code><strong>Document.hasFocus()</strong></code> method returns a {{jsxref("Boolean")}} value indicating whether the document or any element inside the document has focus. This method can be used to determine whether the active element in a document has focus.</div>

<div class="note">
<p>When viewing a document, an element with focus is always the active element in the document, but an active element does not necessarily have focus. For example, an active element within a (popup) window that is not the foreground has no focus.</p>
</div>

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

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

<h3 id="Return_value">Return value</h3>

<p><code>false</code> if the active element in the document has no focus; <code>true</code> if the active element in the document has focus.</p>

<h2 id="Example" name="Example">Example</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 = "The document has the focus.";
  } else {
    info.innerHTML = "The document doesn't have the focus.";
  }
}

function OpenWindow() {
  window.open (
    "https://developer.mozilla.org/",
    "mozdev",
    "width=640,
    height=300,
    left=150,
    top=260"
  );
}

&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;JavaScript hasFocus example&lt;/h1&gt;
  &lt;div id="message"&gt;Waiting for user action&lt;/div&gt;
  &lt;div&gt;&lt;button onclick="OpenWindow()"&gt;Open a new window&lt;/button&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<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>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>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>

<h2 id="Specification" name="Specification">Specification</h2>

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

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/Guide/User_experience/Using_the_Page_Visibility_API">Using the Page Visibility API</a></li>
</ul>
Revert to this revision