17 - Evento focus.


Simulador (Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado)

Problema:

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>

<body>
  <form action="#" method="post">
    <input type="text" name="text1" id="text1" value="Hola" size="20">
    <br>
    <input type="text" name="text2" id="text2" value="Hola" size="20">
  </form>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>
let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#text1");
  x.focus(tomaFoco);
  x = $("#text2");
  x.focus(tomaFoco);
}

function tomaFoco() {
  let x = $(this);
  x.css("color", "#f00");
}
#text1,#text2 {
  color:#00f;
}

Disponer dos controles de tipo text con algún contenido. Fijar de color azul su fuente. Al tomar foco el control cambiar a color rojo.


Ver solución

pagina1.html





funciones.js




estilos.css



Retornar