2

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>&nbsp;</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.

7
  • te refieres a que añada todo el codigo? Commented el 8 jul. 2021 a las 19:04
  • una consulta, si necesitas escuchar el tab y el enter; que pasa si de casualidad se pierde el focus del campo donde estas escribiendo.... no veo que controles el focus del elemento... es importante para saber que elemento se debe bloquear al precionar el enter...
    – user46896
    Commented el 8 jul. 2021 a las 19:18
  • tampoco aclaras si deseas detectar que se presionen las dos teclas al mimo tiempo o una después de la otra...
    – user46896
    Commented el 8 jul. 2021 a las 19:25
  • otro problema que he visto a simple vista es que key press no sirve para detectarlo en el tab ... ya que key press es una combinacion de keydown y keyup; por lo tanto al cumplirce el evento key press, el focus ya no esta en el campo que debes usarlo para detectarlo, te recomiendo usar keydown.
    – user46896
    Commented el 8 jul. 2021 a las 19:42
  • tampoco se sabe de donde obtienes los valores de tagCodigo, ean
    – user46896
    Commented el 8 jul. 2021 a las 19:49

2 respuestas 2

2

Actualización:

Con la edición de tu pregunta:

<input class="form-control" id="ean" name="ean" type="text" placeholder="Escribe el ean y Enter" onblur="buscarProducto(event, this, this.value)" autofocus />

Estás escuchando el evento blur (onblur="buscarProducto(event, this, this.value)"), que no involucra teclas y se va a disparar siempre que el campo pierda foco, ya sea porque se pulsó la tecla Enter, Tabulador o se hizo clic en otro lugar de la página (¿se me escapa otra forma?).

Entonces, no necesitas el evento ni analizar las teclas pulsadas, simplemente el valor recibido:

   function buscarProducto(tagCodigo, ean) {
       if (ean != '') {
           // Aquí ejecutas la petición AJAX
       }
   }

Pero, otro problema es que el comportamiento de la tecla Enter es procesar el formulario (submit), por lo que es muy recomendable escuchar también el evento keydown para cancelar esa acción.

También elimina de la etiqueta el evento y agrégalo desde Javascript.

// Escuchar cuando el campo pierda foco
$('#ean').on('blur', function(e) {
        // Ejecutas la función para la petición AJAX
        buscarProducto($(this), $(this).val());
});

// Escuchar teclas Enter y Tab
$('#ean').on('keydown', function(e) {
    if(e.key == 'Enter' || e.key == 'Tab') {
        // Se debe cancelar el evento para evitar:
        // ENTER: Envío de formulario
        // TAB: Pasar foco al siguiente campo
        e.preventDefault();
        // Ejecutas la función para la petición AJAX
        buscarProducto();
    }
});

// Ya no necesitas el evento... de hecho, no necesitas parámetros
// tagCodigo lo puedes obtener con $('#ean')
// ean lo puedes obtener con $('#ean').val()
function buscarProducto() {
    let ean = $('#ean').val();
    if (ean != '') {
               $.ajax({
                   url: '<?php echo base_url(); ?>/productos/buscarPorCodigo/' + ean,
                   dataType: 'json',
                   success: function(resultado) {
                       if (resultado == 0) {
                           $('#ean').val('');
                       } else {
                           $('#ean').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('');
                           }
                       }
                   }
               });
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control" id="ean" name="ean" type="text" placeholder="Escribe el ean y Enter">

Por otra parte, las propiedades .wich y .keyCode están marcadas como obsoletas, aunque la mayoría de navegadores aún las soportan, pero es más recomendable el uso de .key, que devuelve el nombre de la tecla y puedes consultar los valores aquí.

2
  • Tu respuesta tambien es buena es minimalista.
    – user46896
    Commented el 8 jul. 2021 a las 21:50
  • Funcionó! Y al parecer todas las demas respuestas son buenas. Commented el 13 jul. 2021 a las 18:57
2

Como te explicaba:

  1. el evento keypress no sirve para detectarlo en el tab ... ya que keypress es una combinación de keydown y keyup; por lo tanto al cumplirse el evento keypress, el focus ya no esta en el campo que debes usarlo para detectarlo, te recomiendo usar keydown.

  2. según sea el caso si las teclas se deben presionar en simultaneo o una detrás de la otra tienes dos maneras:

  3. veo que estas implementando e.which lo cual esta marcado como deprécate, en rehusó y rumbo a eliminar el soporte, no te sugiero que uses .keyCode por que tambien esta en el mismo status; en este escenario te recomiendo usar .key

  4. me parece que estas trabajando con elemento agregados con ajax, para que esto funcione correctamente debes usar la delegación de eventos de jquery.

Individual:

document.addEventListener("DOMContentLoaded", function () {
    var check = {
      enter: false,
      tab: false
    }
    $(document).off('keydown.plg', '[name="ejemplo"]');
    $(document).unbind('keydown.plg', '[name="ejemplo"]');
    $(document).on('keydown.plg', '[name="ejemplo"]', function (e) {
        e = e || event;
        if (e.key == 'Enter') {
          e.preventDefault();
          e.stopPropagation();
          check.enter = true;
        }
        if (e.key == 'Tab') {
          e.preventDefault();
          e.stopPropagation();
          check.tab = true;
        }
        if(check.enter == true && check.tab == true){
          check = {
            enter: false,
            tab: false
          };
          //llamas a tu funcion que solo hace la busqueda
          let tagCodigo = ''; //no se de donde salen esta variables pero las coloco para que tengas una referencia
          let ean = ''; //no se de donde salen esta variables pero las coloco para que tengas una referencia
          window.buscarProducto(e, tagCodigo, ean);
        }
    });
});

function buscarProducto(e, tagCodigo, ean) {
  console.log('Ejecutando Busqueda');
  //Aqui iria tu ajax
    /*
    $.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('');
                }
            }
        }
    });
  */
}
<label for="ejemplo">Ejemplo</label>
<input type="text" id="ejemplo" name="ejemplo">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Las dos teclas en conjunto:

document.addEventListener("DOMContentLoaded", function () {
    $(document).off('keydown.plg', '[name="ejemplo"]');
    $(document).unbind('keydown.plg', '[name="ejemplo"]');
    $(document).on('keydown.plg', '[name="ejemplo"]', function (e) {
        e = e || event;
        if(e.key == 'Tab'){
          //evita el desplazamiento del focus
          e.preventDefault();
          e.stopPropagation();
        }
        if(e.key == 'Enter'){
          e.preventDefault();
          e.stopPropagation();
          //llamas a tu funcion que solo hace la busqueda
          let tagCodigo = ''; //no se de donde salen esta variables pero las coloco para que tengas una referencia
          let ean = ''; //no se de donde salen esta variables pero las coloco para que tengas una referencia
          window.buscarProducto(e, tagCodigo, ean);
        }
    });
});

function buscarProducto(e, tagCodigo, ean) {
  console.log('Ejecutando Busqueda');
  //Aqui iria tu ajax
    /*
    $.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('');
                }
            }
        }
    });
  */
}
<label for="ejemplo">Ejemplo</label>
<input type="text" id="ejemplo" name="ejemplo">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

También estoy mirando que tu ambiente es muy parecido a la implementación de lectoras de código de barra, en ese caso si requieres el nombre de un método JavaScript para la ejecución seria el siguiente, cambiaria un poco y usarías el método lectoraProducto() este método no tengo como probarlo:

document.addEventListener("DOMContentLoaded", function () {
  function lectoraProducto(){
    $(document).off('keydown.plg', '[name="ejemplo"]');
    $(document).unbind('keydown.plg', '[name="ejemplo"]');
    $(document).on('keydown.plg', '[name="ejemplo"]', function (e) {
        e = e || event;
        if(e.key == 'Tab'){
          //evita el desplazamiento del focus
          e.preventDefault();
          e.stopPropagation();
        }
        if(e.key == 'Enter'){
          e.preventDefault();
          e.stopPropagation();
          //llamas a tu funcion que solo hace la busqueda
          let tagCodigo = ''; //no se de donde salen esta variables pero las coloco para que tengas una referencia
          let ean = ''; //no se de donde salen esta variables pero las coloco para que tengas una referencia
          window.buscarProducto(e, tagCodigo, ean);
        }
    });
  };
});

function buscarProducto(e, tagCodigo, ean) {
  console.log('Ejecutando Busqueda');
  //Aqui iria tu ajax
    /*
    $.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('');
                }
            }
        }
    });
  */
}
<label for="ejemplo">Ejemplo</label>
<input type="text" id="ejemplo" name="ejemplo">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • 2
    Muy buena respuesta y excelente explicación de los distintos escenarios posibles.
    – Triby
    Commented el 8 jul. 2021 a las 21:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.