0

tengo una duda... actualmente tengo un input "--------" que yo lo lleno cuando busco en un modal y selecciono una fila y ese codigo me lo baja a mi caja de texto. Tengo una funcion que si no tiene 8 caracteres esa caja de texto no se active el boton agregar que lo tengo al final de esa fila pero en este caso es evento"Keyup" y yo no lo ingreso a mano si no que automaticamente se llena... alguno sabra de algun evento que no se al momento de escribir como "keyup" soy nuevo en esto de antemano gracias.

//--Validar Campo CODIGO-PRODUCTO--//
    $('input[id=txtCodigo]').on('keyup',() => {
        //Obtenemos el valor
        var input2 = $('#txtCodigo').val();
        //Validamos que el valor sea mayor a 7 caracteres
        if (input2.length == 5) {
            //Habiiltamos el botón quitando la clase 'disabled' y la propiedad 'disabled'
            $('#btnProductoAgregar').removeClass('disabled').removeAttr('disabled');
        }
        else {
            //Volvemos a deshabilitar el botón, adicionando nuevamente la clase y propiedad 'disabled'
            $('#btnProductoAgregar').addClass('disabled').prop('disabled', true);
        }
    });

img de referencia introducir la descripción de la imagen aquí

5
  • creo que con el evento onChange al modificar el valor, da igual que sea con teclas o con funciones, el evento salta
    – Suso
    Commented el 13 jun. 2022 a las 20:40
  • intente... pero no me hace un cambio, lo que quisiera es no usar "keyup" si no que automicamente detecte que hay caracteres que active mi boton... (no se si formule muy bien mi problema :/ de igual manera vuelvo a explicar mil disculpas.)
    – edger
    Commented el 13 jun. 2022 a las 20:52
  • el evento onChange no es Keyup, son dos eventos distintos. El evento onChange se activa al cambiar el valor no tiene nada que ver con el teclado
    – Suso
    Commented el 13 jun. 2022 a las 21:03
  • para inputs tambien puedes usar el evento on change
    – AugustoM
    Commented el 14 jun. 2022 a las 8:00
  • El keyup es en mi opinión el correcto, pero la comparación no es if (input2.length==5) sino if (input2.length>7) No compares con igual (a 8, según dices, y no 5), porque si por ejemplo copian y pegan, o similares, pasa de una longitud a otra directamente. Y si usas .prop('disabled', true); para deshabilitar, ¿por qué no .prop('disabled', false); para habilitar?
    – VFG
    Commented el 14 jun. 2022 a las 9:27

3 respuestas 3

1

En el código que usas para bajar la selección desde el modal hasta el input (lo que denominas "caja de texto"), puedes agregar, después del código que actualiza el valor del input, un disparador (trigger()) que lance el evento keyup sobre dicho input, de este modo:

$('input[id=txtCodigo]').trigger("keyup");

forzando así la reinterpretación de su value gracias a la escucha (on()) que ya tienes puesta sobre ese input.

Dejo un snippet de ejemplo:

$('#btnProductoAgregar').addClass('disabled').prop('disabled', true);

function pega() {
  $('input[id=txtCodigo]').val("Prueb");
  $('input[id=txtCodigo]').trigger("keyup");
}

//--Validar Campo CODIGO-PRODUCTO--//
$('input[id=txtCodigo]').on('keyup', () => {
  //Obtenemos el valor
  var input2 = $('#txtCodigo').val();
  //Validamos que el valor sea mayor a 7 caracteres
  if (input2.length == 5) {
    //Habiiltamos el botón quitando la clase 'disabled' y la propiedad 'disabled'
    $('#btnProductoAgregar').removeClass('disabled').removeAttr('disabled');
  } else {
    //Volvemos a deshabilitar el botón, adicionando nuevamente la clase y propiedad 'disabled'
    $('#btnProductoAgregar').addClass('disabled').prop('disabled', true);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="txtCodigo">
<button id="btnProductoAgregar">
Agregar
</button>
<button onclick="pega()">
Pega
</button>

1
  • obtuve lo que queria gracias
    – edger
    Commented el 17 jun. 2022 a las 20:02
1

Por favor edita la pregunta y muestra el codigo que llena ese input, pero por si te ayuda un ejemplo.

En la funcion que te llena el input, ahi mismo tienes que validar si tienes 8 caracteres o no, tambien ahi mismo tienes que validar si el boton se bloquea o no, por ejemplo:

$(document).ready(function(){
 $('#btnAgregar').attr('disabled','true');
});

function funcion_que_llena_el_input(valorInput){
  $('#txtCaracteres').val(valorInput);
  
  alert("Cantidad de caracteres: "+valorInput.length);
  
  if(valorInput.length<8){
    $('#btnAgregar').attr('disabled','true');
  }else{
    $('#btnAgregar').removeAttr('disabled');
  }
}
<button id="btn1" onclick="funcion_que_llena_el_input('Este input tiene muchos caracteres');">Mas de 8 caracteres</button>
     <button id="btn2" onclick="funcion_que_llena_el_input('nada');">Menos de 8 caracteres</button><br><br>

<input type="text" id="txtCaracteres"><br><br>
<button id="btnAgregar">Agregar</button>
     
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Si te fijas en el codigo, en la funcion donde agregas el valor al input, ahi mismo validas el boton, con valorInput.length obtienes la cantidad de caracteres que tendra el input, de esa manera en if puedes validar si tiene o no 8 caracteres. Y antes de validar eso coloca esto

$(document).ready(function(){
 $('#btnAgregar').attr('disabled','true');
});

Para que desde un inicio tu boton vaya deshabilitado, luego se validara si se habilita o no

Es un ejemplo simple espero puedas implementarlo

0

Te paso una solución directa a tu problema, tal y como tienes tu HTML y nombres. Hay una salvedad... que es que comparo la longitud con 8, como mínimo de longitud necesaria (como decías en tu planteamiento), y no con 5 que es lo que tenías en tu código.

$('#txtCodigo').on('keyup',() => {
    const largominimo = 8;
    //Obtenemos el valor
    var input2 = $('#txtCodigo').val();
    //Validamos que el valor sea mayor a 7 caracteres
    if (input2.length >= largominimo) {
        //Habiiltamos el botón '
        $('#btnProductoAgregar').removeClass('disabled').prop('disabled',false);
    }
    else {
        //Volvemos a deshabilitar el botón
        $('#btnProductoAgregar').addClass('disabled').prop('disabled', true);
    }
});
4
  • 1
    Ese no es realmente el problema que tiene el OP, sino cuando abre el modal, selecciona un valor y luego automáticamente se pone en ese input, pues al no activarse el keyup de ese modo no se valida como pretende (ya sean 5, o más de 8 o lo que sea)
    – masterguru
    Commented el 14 jun. 2022 a las 9:39
  • Aquí te dejo un fiddle con tu código y con un botón Pega que intenta reproducir lo que seguramente hace el modal al seleccionar una fila y regresar al campo. Fíjate que si lo ejecutas sin activar la linea del trigger no funciona pues no coge el evento keyup. Si activas la linea del trigger entonces si funciona, y de ahí mi respuesta.
    – masterguru
    Commented el 14 jun. 2022 a las 9:47
  • Ok, @masterguru. Cierto... No había visto eso bien
    – VFG
    Commented el 14 jun. 2022 a las 9:53
  • 2
    Vale, aún así tu respuesta corrige los fallos entre lo que dice y lo que hace después, y yo quizás la dejaria para que si la lee se de cuenta de sus incoherencias entre la propia pregunta y el código que nos ha expuesto, no sea que ni aplicando el trigger se crea que no funciona porque no se de cuenta de la longitud de la cadena que tiene puestos.
    – masterguru
    Commented el 14 jun. 2022 a las 9:57

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.