En el documento HTML, el método document.hasfocus( ) se usa para indicar si un elemento o documento tiene el foco o no. La función devuelve un valor verdadero si el elemento está enfocado; de lo contrario, se devuelve falso. Este método se puede utilizar para determinar si el elemento activo está actualmente enfocado.
Sintaxis
document.hasfocus();
Parámetros: Este método no tiene parámetros.
Valor devuelto: El método hasfocus() devuelve un valor booleano que indica si un elemento o documento tiene foco o no.
Los siguientes ejemplos ilustran el método HTML DOM hasfocus():
Ejemplo 1: Este ejemplo ilustra si el documento tiene foco o no.
html
<!DOCTYPE html>
<html>
<title>
HTML | DOM hasFocus() Method
</title>
<body>
<p>
Click anywhere in the document to
test hasfocus() function.
</p>
<p id="para"></p>
<script>
setInterval("hasfocustest()", 1);
function hasfocustest() {
var x = document.getElementById("para");
if (document.hasFocus()) {
x.innerHTML =
"The document has focus.";
} else {
x.innerHTML =
"The document DOES NOT have focus.";
}
}
</script>
</body>
</html>
Producción:
Inicialmente :
Después de presionar en el documento :
Explicación: La función setinterval() llama a hasfocustest() en 1 milisegundos que después de la evaluación produce un resultado.
Ejemplo 2: Este ejemplo ilustra los cambios de color de fondo del encabezado en función de si el documento tiene foco o no.
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM hasFocus() Method
</title>
</head>
<body>
<p>
Click anywhere in the document to
test hasfocus() function.
</p>
<h1 id="para"> Function Testing</h1>
<script>
setInterval("hasfocustest()", 1);
function hasfocustest() {
var x = document.getElementById("para");
if (document.hasFocus()) {
x.style.background = "palegreen";
} else {
x.style.background = "white";
}
}
</script>
</body>
</html>
</html>
Producción:
Inicialmente :
Después de presionar en el documento :
Navegador compatible: los navegadores compatibles con el método se enumeran a continuación:
- Google cromo 1
- Borde 12
- Internet Explorer 5.5
- firefox 3
- Ópera 15
- Safari 4
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA