JavaScript - Como saber que elemento tiene el foco - solucion

   
Vista:
Imágen de perfil de xve

Como saber que elemento tiene el foco - solucion

Publicado por xve (1595 intervenciones) el 23/09/2014 15:24:48
Hola, aquí indico como saber que elemento de nuestra página web tiene el foco con JavaScript

La instrucción es: document.activeElement

Si por ejemplo, estamos en un recuadro de un formulario, podemos saber su nombre con:
1
document.activeElement.name

o cualquier propiedad del mismo, por ejemplo con type podremos saber el tipo de input:
1
document.activeElement.type

Aquí tenéis un simple ejemplo:
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
<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
 
	<script>
	function info()
	{
		var resultado="Esta seleccionado el input...";
		if(document.activeElement.name)
			resultado+="<br>con nombre: <b>"+document.activeElement.name+"</b>";
		if(document.activeElement.type)
			resultado+="<br>del tipo: <b>"+document.activeElement.type+"</b>";
		document.getElementById("resultado").innerHTML=resultado;
	}
	</script>
 
	<style>
	.error {display:none;}
	</style>
</head>
 
<body>
 
<form>
	Introduce un nombre
	<input type="text" name="IntNombre" onfocus="info();">
	<div id="eIntNombre" class="error"></div>
 
	<br>Introduce tu apellido
	<input type="text" name="apellido" onfocus="info();">
 
	<p><input type="button" id="miBoton" value="Botón" onfocus="info();"></p>
 
	<div id="resultado"></div>
</form>
 
</body>
</html>


Espero que os sirva de ayuda.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
2
Responder