Guías Técnicas

Ejemplos de uso de `hx-trigger` en HTMX

El atributo hx-trigger (en inglés: “trigger” - “disparador”). Le permite especificar qué evento activará la solicitud. De forma predeterminada, el evento click activa la solicitud.

1Atributo hx-trigger='click'

hx-trigger='click' indica que la solicitud HTMX se activará cuando el usuario haga clic en el elemento. Es el evento más común para interacciones.

html 
<button hx-get="/click" hx-trigger="click" hx-target="#output">Haz click</button>

  <div id="output"></div>
  Evento click

  • Dispara la petición al hacer click en el botón.

2Atributo hx-trigger='input'

hx-trigger='input', dispara la solicitud HTMX cada vez que el valor de un campo de entrada cambia mientras se escribe.

html 
<input type="text" hx-get="/input" hx-trigger="input" hx-target="#output" />
  
  <div id="output"></div>
  Evento input

  • Dispara la petición cada vez que el valor del input cambia.

3Atributo hx-trigger='change'

hx-trigger='change', activa la solicitud HTMX cuando el valor de un campo cambia y se pierde el foco o se confirma el cambio.

html 
<select hx-get="/change" hx-trigger="change" hx-target="#output">
  <option value="">Selecciona</option>
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
  </select>
  <div id="output"></div>
  Evento change

  • Dispara la petición cuando cambia la selección.

4Atributo hx-trigger='keyup'

hx-trigger='keyup', dispara la solicitud HTMX cada vez que se suelta una tecla mientras se escribe en un campo.

html 
<input type="text" hx-get="/keyup" hx-trigger="keyup" hx-target="#output" /> 

  <div id="output"></div>
  Evento keyup

  • Dispara la petición cuando se suelta una tecla.

5Atributo hx-trigger='keydown'

hx-trigger='keydown', ejecuta la solicitud HTMX en el momento en que se presiona una tecla dentro de un campo.

html 
<input type="text" hx-get="/keydown" hx-trigger="keydown" hx-target="#output" /> 

  <div id="output"></div>
  Evento keydown

  • Dispara la petición cuando se presiona una tecla.

6Atributo hx-trigger='keypress'

hx-trigger='keypress', dispara la solicitud HTMX cuando se pulsa una tecla imprimible en un campo de entrada.

html 
<input type="text" hx-get="/keypress" hx-trigger="keypress" hx-target="#output" /> 

  <div id="output"></div>
  Evento keypress

  • Dispara la petición cuando se presiona y mantiene una tecla.

7Atributo hx-trigger='mouseover'

hx-trigger='mouseover', ejecuta la solicitud HTMX cuando el cursor pasa por encima del elemento.

html 
<div hx-get="/mouseover" hx-trigger="mouseover" hx-target="#output" style="padding: 10px; border: 1px solid black; display:inline-block;">
  Pasa el mouse aquí
  </div>
  <div id="output"></div>
  Evento mouseover

  • Dispara la petición al pasar el mouse sobre el elemento.

8Atributo hx-trigger='mouseout'

hx-trigger='mouseout', dispara la solicitud HTMX cuando el cursor sale del área del elemento.

html 
<div hx-get="/mouseout" hx-trigger="mouseout" hx-target="#output" style="padding: 10px; border: 1px solid black; display:inline-block;">
  Quita el mouse de aquí
  </div>

  <div id="output"></div>
  Evento mouseout

  • Dispara la petición al sacar el mouse del elemento.

9Atributo hx-trigger='focus'

hx-trigger='focus', ejecuta la solicitud HTMX cuando el elemento recibe foco (por ejemplo, al hacer clic en un campo de entrada).

html 
<input type="text" hx-get="/focus" hx-trigger="focus" hx-target="#output" /> 
  <div id="output"></div>
  Evento focus

  • Dispara la petición al enfocar el campo.

10Atributo hx-trigger='blur'

hx-trigger='blur', ejecuta la solicitud HTMX cuando el elemento pierde el foco (por ejemplo, al salir de un campo de entrada).

html 
<input type="text" hx-get="/blur" hx-trigger="blur" hx-target="#output" /> 
  <div id="output"></div>
  Evento blur

  • Dispara la petición al perder el foco del campo.

11Atributo hx-trigger='load'

hx-trigger='load', ejecuta la solicitud HTMX automáticamente cuando el elemento se carga en la página.

html 
<div hx-get="/load" hx-trigger="load" hx-target="#output">Contenido inicial</div> 
  <div id="output"></div>
  Evento load

  • Dispara la petición al cargar el elemento.

12Atributo hx-trigger='unload'

hx-trigger='unload', dispara la solicitud HTMX justo antes de que el elemento o la página se descargue o cierre.

html 
<body hx-get="/unload" hx-trigger="unload" hx-target="#output"></body> 
  <div id="output"></div>
  Evento unload

  • Dispara la petición cuando se descarga la página o el elemento.

13Atributo hx-trigger='submit'

hx-trigger='submit', dispara la solicitud HTMX cuando se envía un formulario.

html 
<form hx-post="/submit" hx-trigger="submit" hx-target="#output">
      <input type="text" name="nombre" placeholder="Nombre" />
      <button type="submit">Enviar</button>
  </form>

  <div id="output"></div>
  Evento submit

  • Dispara la petición al enviar el formulario.

14Atributo hx-trigger='every 1s'

hx-trigger='every 1s',ejecuta la solicitud HTMX automáticamente cada 1 segundo.

html 
<div hx-get="/every-second" hx-trigger="every 1s" hx-target="#output">Actualización periódica</div> 

  <div id="output"></div>
  Evento intervalado

  • Dispara la petición cada 1 segundo automáticamente.