← Todos los artículos

Tipos de acciones

INPUT: acción de una línea como mini barra de comandos en la barra de acciones de JustZix

15 mayo 2026 · por JustZix Team

TEXTAREA es un bloc de notas — Enter deja un salto de línea, el código arranca al blur. INPUT es lo contrario — Enter activa el código inmediatamente. Esto lo convierte en una «mini barra de comandos» — escribes algo, Enter, la acción ocurre. Ligero, de una línea, se integra perfectamente en la barra de acciones junto a BUTTON y SLIDER.

¿En qué se diferencia de TEXTAREA y SLIDER?

Lo más importante: Enter en INPUT suelta el foco + ejecuta el código. Misma UX que Spotlight (Mac), la barra de direcciones de Chrome, los slash commands de Discord. Modelo mental del usuario: «escribe → Enter → acción».

Primera acción INPUT

Caso de uso: búsqueda rápida por nombre de producto, con filtrado personalizado.

type: 'input'
label: '🔍 Search'
placeholder: 'Escribe un nombre de producto...'
defaultValue: ''
code: |
  // value es el texto escrito. Tras Enter / blur.
  if (!value || value.length < 2) {
    document.querySelectorAll('.product').forEach(p => p.style.display = '');
    return;
  }
  const q = value.toLowerCase();
  document.querySelectorAll('.product').forEach(p => {
    const text = p.textContent.toLowerCase();
    p.style.display = text.includes(q) ? '' : 'none';
  });
  JUSTZIX.log(`Filtrado: "${value}"`);

UI: campo de texto en la barra. Escribe «iphone» + Enter → solo los productos con «iphone» visibles. Escribe vacío + Enter → todos visibles.

Modelo de memory — qué sobrevive al F5

Idéntico a TEXTAREA:

1. sessionStorage (primario) — guardado síncrono al pulsar. Clave: jz_action_memory_{id}. Sobrevive al F5.
2. chrome.storage.local (backup) — guardado asíncrono al pulsar. Sobrevive a «Restaurar sesión».

Guardado en cada pulsación, el código arranca solo en Enter / blur. Guardar = a menudo (seguridad), ejecutar = rara vez (eficiencia).

3 colores + placeholder

color              → fondo del campo
colorText          → color del texto escrito
colorPlaceholder   → color del placeholder (variable CSS --jz-placeholder-color)

Sin override parece un default nativo del navegador (borde gris, fondo blanco, texto negro). Para alinearlo a una barra de acciones oscura: color=#1A1A1A, colorText=#E5E5E5, colorPlaceholder=#777.

Caso de uso 1 — Navegación rápida

Barra de comandos «Goto» — escribes una ruta, Enter, redirect:

label: '➡️ Goto'
placeholder: '/admin/users o https://...'
code: |
  if (!value) return;
  if (value.startsWith('http')) {
    location.href = value;
  } else {
    location.pathname = value;
  }
  JUSTZIX.log(`Navegado a ${value}`);

Puedes añadir una regla de teclado (Tab+Shift) para poner el foco en el INPUT. Sin interrumpir el flujo del ratón.

Caso de uso 2 — Inyección de tags/labels

Un formulario de registro requiere un ID promo. En lugar de recordarlo: campo INPUT + auto-relleno del formulario tras Enter:

label: '🎟️ Promo'
placeholder: 'PROMO2025...'
defaultValue: ''
code: |
  if (!value) return;
  const promoField = document.querySelector('input[name=promo_code]');
  if (promoField) {
    promoField.value = value;
    promoField.dispatchEvent(new Event('input', { bubbles: true }));
    promoField.dispatchEvent(new Event('change', { bubbles: true }));
    JUSTZIX.log(`Promo aplicada: ${value}`);
  }

La memory ayuda: la próxima vez en este dominio el campo ya tiene la promo de la sesión anterior. Pulsa Enter → la reaplica.

Caso de uso 3 — Parser de comandos personalizado

Comandos en estilo Discord: un campo que reconoce los prefijos de los comandos:

label: '/ Command'
placeholder: '/login, /addCart, /reset...'
code: |
  if (!value || !value.startsWith('/')) return;
  const parts = value.slice(1).split(' ');
  const cmd = parts[0];
  const args = parts.slice(1).join(' ');

  if (cmd === 'login') {
    JZ.click('Login');
  } else if (cmd === 'addCart' && args) {
    document.querySelector(`[data-product="${args}"] .add`)?.click();
  } else if (cmd === 'reset') {
    document.querySelectorAll('input').forEach(i => i.value = '');
    JUSTZIX.log('Formulario reseteado.');
  } else {
    JUSTZIX.warn(`Comando desconocido: /${cmd}`);
  }
  // Vacía el campo tras la ejecución
  $el.value = '';

Es literalmente una mini-CLI en la barra de acciones. $el es la referencia al input — puedes vaciarlo programáticamente tras un comando.

Caso de uso 4 — Filtro en vivo con debounce

Filtro en vivo (al pulsar, no solo en Enter) — requiere un workaround, porque el código INPUT corre solo en Enter/blur:

// En una regla JS (auto-run en la página):
let debounce;
document.addEventListener('input', (e) => {
  if (e.target.dataset.jzActionType !== 'input') return;
  if (e.target.dataset.jzLabel !== 'Filter') return;
  clearTimeout(debounce);
  debounce = setTimeout(() => {
    const q = e.target.value.toLowerCase();
    document.querySelectorAll('.item').forEach(it => {
      it.style.display = it.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
  }, 200);
});

La regla JS escucha los eventos input sobre los elementos JustZix data-jz-action-type='input', hace dispatch de su propio filtrado con debounce. El campo del código de INPUT se queda vacío (o fallback a Enter).

Trampas

• Enter activa el código — es la diferencia vs TEXTAREA. Si un usuario escribe contenido multilínea y pulsa Enter por error, el código arranca con un value incompleto. Best practice: una label como «🔍 Search» / «➡️ Goto» señala una barra de comandos.
• Tab también activa blur → código. Tab mueve el foco al elemento siguiente, blur arranca, el código corre. Puede confundir si el usuario solo quería mover el foco.
• Sin label/placeholder INPUT parece vacío. isActionRenderable para INPUT devuelve siempre true (desde v2.13.7), así que se renderiza incluso sin label. UX-mala — un placeholder es un MÍNIMO.
• $el.value vs value en el contexto. value en los extra es el valor EN EL momento de la invocación del código. $el.value es el estado DOM actual (puede diferir si el usuario ha empezado a escribir otro texto durante un fetch async en el código).
• El arrastre de la barra está bloqueado durante la escritura. mousedown.stopPropagation — el input «captura» los eventos del ratón, arrastrar la barra mediante el input no funciona. A propósito.

Qué hacer después

INPUT es «una barra de comandos en la barra» — el control interactivo más ligero, perfecto para workflows rápidos texto → acción. La serie completa de los tipos de acción:

• BUTTON — fire-and-forget
• SELECT static vs js — elegir de una lista
• TEXTAREA — bloc de notas multilínea
• SLIDER — controlador de rango nativo
• TOGGLE3 — segmented control de 3 estados
• window.JZ + JUSTZIX helpers — API programática

Esto cierra la referencia completa de los 6 tipos de acción de JustZix. Si estás construyendo una toolbar QA personal, ahora tienes un mapa de todos los ladrillos.

Instala JustZix — completamente gratuito, sin cuenta, sin servidor.