fix(kiosko): bloquear campo al primer Tab del escáner + numpad más pequeño
El Tab es la señal de fin de cédula en el barcode. Al recibirlo se activa _scannerLocked y se ignoran todos los caracteres siguientes (apellidos, fecha, sangre) hasta que llegue Enter o se limpie el campo. También se redujo el numpad ~10% para que entre en pantalla. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Sonnet 4.6
parent
5c02a8ea99
commit
960867d785
@@ -391,11 +391,11 @@ unset($p);
|
|||||||
margin: .6rem 0 1rem;
|
margin: .6rem 0 1rem;
|
||||||
}
|
}
|
||||||
.np-btn {
|
.np-btn {
|
||||||
padding: 1rem;
|
padding: .8rem;
|
||||||
font-size: 1.6rem;
|
font-size: 1.4rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
border: 1.5px solid #e2e8f0;
|
border: 1.5px solid #e2e8f0;
|
||||||
border-radius: 12px;
|
border-radius: 10px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #1e293b;
|
color: #1e293b;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -409,7 +409,7 @@ unset($p);
|
|||||||
.np-clear { color: #ef4444; border-color: #fca5a5; }
|
.np-clear { color: #ef4444; border-color: #fca5a5; }
|
||||||
.np-back { color: #64748b; }
|
.np-back { color: #64748b; }
|
||||||
.np-ok { background: var(--brand); color: #fff; border-color: var(--brand);
|
.np-ok { background: var(--brand); color: #fff; border-color: var(--brand);
|
||||||
font-size: 1.15rem; padding: 1.1rem; }
|
font-size: 1rem; padding: .9rem; }
|
||||||
|
|
||||||
/* ── Responsive ── */
|
/* ── Responsive ── */
|
||||||
@media (min-height: 800px) {
|
@media (min-height: 800px) {
|
||||||
@@ -621,14 +621,23 @@ unset($p);
|
|||||||
});
|
});
|
||||||
|
|
||||||
// El lector casi siempre envía Enter al final → disparar de inmediato.
|
// El lector casi siempre envía Enter al final → disparar de inmediato.
|
||||||
// Tab entre campos del código de barras: prevenir que el browser cambie el foco.
|
// Tab entre campos del código de barras: prevenir foco y BLOQUEAR el campo
|
||||||
|
// (el Tab indica fin de la cédula — todo lo que sigue es apellido/fecha/etc).
|
||||||
|
let _scannerLocked = false;
|
||||||
_inpCedula.addEventListener('keydown', (e) => {
|
_inpCedula.addEventListener('keydown', (e) => {
|
||||||
if (e.key === 'Tab') {
|
if (e.key === 'Tab') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
// Si ya tenemos dígitos válidos, bloquear el campo aquí mismo
|
||||||
|
if (/^\d{5,15}$/.test(_inpCedula.value.trim())) _scannerLocked = true;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (_scannerLocked && e.key.length === 1) {
|
||||||
|
e.preventDefault(); // ignorar todo lo que llega después del primer Tab
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
_scannerLocked = false;
|
||||||
const val = _inpCedula.value.trim();
|
const val = _inpCedula.value.trim();
|
||||||
if (/^\d{5,15}$/.test(val)) confirmarTurno();
|
if (/^\d{5,15}$/.test(val)) confirmarTurno();
|
||||||
}
|
}
|
||||||
@@ -681,6 +690,7 @@ unset($p);
|
|||||||
const inpCedula = document.getElementById('inp-cedula');
|
const inpCedula = document.getElementById('inp-cedula');
|
||||||
inpCedula.focus();
|
inpCedula.focus();
|
||||||
inpCedula.value = '';
|
inpCedula.value = '';
|
||||||
|
_scannerLocked = false;
|
||||||
_keyTimes = [];
|
_keyTimes = [];
|
||||||
clearTimeout(_timerRafaga);
|
clearTimeout(_timerRafaga);
|
||||||
resetInactividad();
|
resetInactividad();
|
||||||
@@ -766,6 +776,7 @@ unset($p);
|
|||||||
confirmarTurno();
|
confirmarTurno();
|
||||||
return;
|
return;
|
||||||
} else if (k === 'C') {
|
} else if (k === 'C') {
|
||||||
|
_scannerLocked = false;
|
||||||
inp.value = '';
|
inp.value = '';
|
||||||
} else if (k === '⌫') {
|
} else if (k === '⌫') {
|
||||||
inp.value = inp.value.slice(0, -1);
|
inp.value = inp.value.slice(0, -1);
|
||||||
|
|||||||
Reference in New Issue
Block a user