Estoy trabajando con alertas, en un proyecto, para ello utilizo sweetalert2 por sus diseños y facilidad, sin embargo me he topado con una problema. En un principio no lo creí tan importante pero ahora observo que si es tedioso en su momento.
El problema trata de lo siguiente:
Sweetalert2 utiliza sus propias clases para inputs
pero la desventaja es que solo se puede utilizar un input
en las alertas, es por ello que se pueden insertar formulario de html dentro de una alerta. Sin embargo cuando utilizo un formulario html no puedo simplemente presionar la tecla Intro o Enter para enviar o realizar la acción de cargar lo que sigue de mi código.
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<script>
async autenticar(){
const { value: formAutenticar } = await Swal.fire({
title: 'Autenticar Administrador',
html: '<div class="form-inline col-sm-12 mt-3">'+
'<label class="control-label col-sm-4" for="UserName">Usuario</label>'+
'<input required="" class="form-control col-sm-7" id="UserName" name="usuario" type="text" autofocus style="color: #2e7d32;">'+
'</div>'+
'<div class="form-inline col-sm-12 mt-3">'+
'<label class="control-label col-sm-4" for="UserPass">Contraseña</label>'+
'<input required="" class="form-control col-sm-7" id="UserPass" name="clave" type="password" style="color: #2e7d32;">'+
'</div>',
backdrop: false,
showConfirmButton: true,
showCancelButton: true,
confirmButtonText: 'Validar',
cancelButtonText: 'Cancelar',
confirmButtonColor:'#40B340',
cancelButtonColor:'#FF0000',
showCloseButton: true,
focusConfirm: true,
focusCancel: false,
preConfirm: () => {
return [
document.getElementById('UserName').value,
document.getElementById('UserPass').value
]
}
});
if (formAutenticar && formAutenticar[0]!= '' && formAutenticar[1]!= '') {
Swal.fire({title: 'Datos Correctos', icon:'success', backdrop: false});
}else{
Swal.fire({title: 'Datos incorrectos', icon:'warning', backdrop: false});
}
}
</script>
Lo que busco, como ya eh mencionado, es poder ingresar los datos y al presionar la tecla Intro poder realizar lo que sigue del código, hasta ahora lo que tengo que hacer es arrastrar el puntero y seleccionar la opcion.