Es sencilla mi pregunta. Estoy trabajando una parte con Javascript una parte de mi codigo, el problema es que intento relizar una funcion al presionar TAB despues de escribir en una casilla. La funcion se completa al presionar ENTER, y he probado algunos metodos pero no me funcionan al presionar TAB, dejo mi codigo, le agradezco a esta enorme comunidad por que han ayudado bastante
Este es mi HTML
<div id="layoutSidenav_content">
<main>
<div class="container-fluid">
<form method="POST" id="form_compra" name="form_compra" action="<?php echo base_url(); ?>/compras/guarda" autocomplete="off">
<div class="form-group">
<div class="row">
<div class="col-12 col-sm-4">
<input type="hidden" id="art_id" name="art_id">
<input type="hidden" id="comp_id" name="comp_id" value="<?php echo $comp_id; ?>">
<i class="fas fa-barcode"></i>
<label>EAN (Codigo de barras)</label>
<input class="form-control" id="ean" name="ean" type="text" placeholder="Escribe el ean y Enter" onblur="buscarProducto(event, this, this.value)" autofocus />
<label for="ean" id="resultado_error" style="color:brown;"></label>
</div>
<div class="col-12 col-sm-4">
<i class="fas fa-monument"></i>
<label>Nombre del producto</label>
<input class="form-control" id="descripcion" name="descripcion" type="text" disabled />
</div>
<div class="col-12 col-sm-4">
<i class="fas fa-dolly-flatbed"></i>
<label>Cantidad</label>
<input class="form-control" id="cantidad" name="cantidad" type="text" />
</div>
</div>
<div class="row">
<div class="col-12 col-sm-4">
<i class="fas fa-dollar-sign"></i>
<label>Precio de compra</label>
<input class="form-control" id="precioCompra" name="precioCompra" type="text" />
</div>
<div class="col-12 col-sm-4">
<i class="fas fa-dollar-sign"></i>
<label>Subtotal</label>
<input class="form-control" id="subtotal" name="subtotal" type="text" disabled />
</div>
<div class="col-12 col-sm-4">
<label><br> </label>
<button id="agregar_producto" name="agregar_produto" type="button" class="btn btn-primary" onclick="agregarProducto(art_id.value, cantidad.value, '<?php echo $comp_id; ?>' )">Agregar producto</button>
</div>
</div>
</div>
<div class="row">
<table id="tablaProductos" class="table table-hover table-striped table-sm table-responsive tablaProductos" width="100%">
<thead class="thead-dark">
<th>#</th>
<th>EAN</th>
<th>Nombre</th>
<th>Precio</th>
<th>Cantidad</th>
<th>Total</th>
<th width="1%"></th>
</thead>
<tbody></tbody>
</table>
</div>
<div class="row">
<div class="col-12 col-sm-6 offset-md-6">
<label style="font-weight: bold; font-size: 30px; text-align: center;">Total $</label>
<input type="text" id="total" name="total" size="7" readonly="true" value="0.00" style="font-weight: bold; font-size: 30px; text-align: center;">
<button type="button" id="completa_compra" class="btn btn-success">Completar Compra</button>
</div>
</div>
</form>
</div>
</main>
Este es mi codigo en JS.
<script>
$(document).ready(function() {
$("#completa_compra").click(function() {
let nFila = $("#tablaProductos tr").length;
if (nFila < 2) {
} else {
$("#form_compra").submit();
}
});
});
function buscarProducto(e, tagCodigo, ean) {
var enterKey = 13;
if (ean != '') {
$.ajax({
url: '<?php echo base_url(); ?>/productos/buscarPorCodigo/' + ean,
dataType: 'json',
success: function(resultado) {
if (resultado == 0) {
$(tagCodigo).val('');
} else {
$(tagCodigo).removeClass('has-error');
$("#resultado_error").html(resultado.error);
if (resultado.existe) {
$("#art_id").val(resultado.datos.art_id);
$("#descripcion").val(resultado.datos.descripcion);
$("#cantidad").val(1);
$("#precioCompra").val(resultado.datos.precioCompra);
$("#subtotal").val(resultado.datos.precioCompra);
$("#cantidad").focus();
} else {
$("#art_id").val('');
$("#descripcion").val('');
$("#cantidad").val('');
$("#precioCompra").val('');
$("#subtotal").val('');
}
}
}
});
}
}
function eliminaProducto(art_id, comp_id) {
$.ajax({
url: '<?php echo base_url(); ?>/TemporalCompra/eliminar/' + art_id + "/" + comp_id,
success: function(resultado) {
if (resultado == 0) {
$(tagCodigo).val('');
} else {
var resultado = JSON.parse(resultado);
$("#tablaProductos tbody").empty();
$("#tablaProductos tbody").append(resultado.datos);
$("#total").val(resultado.total);
}
}
});
}
function agregarProducto(art_id, cantidad, comp_id) {
if (art_id != null && art_id != 0 && cantidad > 0) {
$.ajax({
url: '<?php echo base_url(); ?>/TemporalCompra/inserta/' + art_id + "/" + cantidad + "/" + comp_id,
success: function(resultado) {
if (resultado == 0) {
} else {
var resultado = JSON.parse(resultado);
if (resultado.error == '') {
$("#tablaProductos tbody").empty();
$("#tablaProductos tbody").append(resultado.datos);
$("#total").val(resultado.total);
$("#art_id").val('');
$("#ean").val('');
$("#descripcion").val('');
$("#cantidad").val('');
$("#precioCompra").val('');
$("#subtotal").val('');
}
}
}
});
}
}
</script>
Recordemos que se requiere al salir del input, ya sea con TAB o al salir del input EAN, se realice la función de buscarProducto. Saludos, espero sus comentarios.