feat(kiosko): numpad táctil para campo cédula

- inputmode=none en inp-cedula suprime el teclado Windows
- Grid 3×4 con dígitos 0-9, C (borrar todo) y ⌫ (borrar uno)
- pointerdown + preventDefault mantiene el foco en el input
- El escáner sigue funcionando (escribe por keydown, no por IME)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-07-23 11:12:31 -05:00
co-authored by Claude Sonnet 4.6
parent 43f14c2571
commit 104ba07af7
+62 -1
View File
@@ -383,6 +383,32 @@ unset($p);
flex-shrink: 0;
}
/* ── Numpad táctil ── */
.numpad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .5rem;
margin: .6rem 0 1rem;
}
.np-btn {
padding: 1rem;
font-size: 1.6rem;
font-weight: 700;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
background: #fff;
color: #1e293b;
cursor: pointer;
touch-action: manipulation;
-ms-touch-action: manipulation;
transition: background .1s, transform .08s;
user-select: none;
-webkit-user-select: none;
}
.np-btn:active { background: var(--brand-light); transform: scale(.94); }
.np-clear { color: #ef4444; border-color: #fca5a5; }
.np-back { color: #64748b; }
/* ── Responsive ── */
@media (min-height: 800px) {
.prioridad-grid { gap: 1.3rem; }
@@ -476,8 +502,24 @@ unset($p);
<label for="inp-cedula">Número de cédula <span style="color:#ef4444">*</span></label>
<input type="text" id="inp-cedula" class="form-control"
placeholder="Ej: 1234567890" maxlength="20"
autocomplete="off" inputmode="numeric">
autocomplete="off" inputmode="none">
</div>
<!-- Teclado numérico táctil -->
<div class="numpad">
<button class="np-btn" data-k="1">1</button>
<button class="np-btn" data-k="2">2</button>
<button class="np-btn" data-k="3">3</button>
<button class="np-btn" data-k="4">4</button>
<button class="np-btn" data-k="5">5</button>
<button class="np-btn" data-k="6">6</button>
<button class="np-btn" data-k="7">7</button>
<button class="np-btn" data-k="8">8</button>
<button class="np-btn" data-k="9">9</button>
<button class="np-btn np-clear" data-k="C">C</button>
<button class="np-btn" data-k="0">0</button>
<button class="np-btn np-back" data-k="⌫"><i class="fas fa-backspace"></i></button>
</div>
<div class="mb-3">
<label for="inp-cel">WhatsApp
<span style="color:#94a3b8;font-size:.82rem;font-weight:400"> (opcional)</span>
@@ -703,6 +745,25 @@ unset($p);
function setSpinner(on) { document.getElementById('spinner').classList.toggle('active', on); }
// ── Numpad táctil ─────────────────────────────────────────────────
document.querySelectorAll('.np-btn').forEach(btn => {
// pointerdown con preventDefault evita que el input pierda el foco
btn.addEventListener('pointerdown', e => {
e.preventDefault();
const k = btn.dataset.k;
const inp = _inpCedula;
if (k === 'C') {
inp.value = '';
} else if (k === '⌫') {
inp.value = inp.value.slice(0, -1);
} else if (inp.value.length < 20) {
inp.value += k;
}
// Notificar al detector de escáner/inactividad
inp.dispatchEvent(new Event('input', { bubbles: true }));
});
});
// ── Escape admin: tocar logo/nombre 7 veces en 4 s ───────────────
(function() {
let _taps = 0, _timer = null;