1

Tengo un <input> en el que aparece por defecto un 1 lo que estoy tratando de hacer es que al cambiar su valor ejecute una función que hará que aparezca a su lado un botón de Actualizar. Necesito que ejecute la función justo al cambiarle el valor, por lo que un onchange() no me serviría ya que el usuario debería de hacer click fuera del <input> para que reconozca que ha cambiado, no se si me explico. Lo que actualmente tengo es lo siguiente:

El script (jQuery):

function update(position){
        $(quantity+position).after('<br><input class="botonTipo1" type="submit" value="Actualizar">');
}

El <input>que uso:

<input type="number" min="1" onchange="update(this.id);" style="padding-left:10px; width:50%; font-size:15px;font-weight:bold;" class="input" name="qty_1" id="qty_1" value="1">

Es curioso porque si indico en su atributo que sea type="number" y hago click dentro de él y solamente pongo un 2 (con lo que su valor sería 12), por ejemplo, al pasar el ratón por encima de las flechitas que aparecen dentro (porque es de tipo number) se ejecuta la función como si detectase que el valor ha cambiado, es algo que no termino de entender.

De todos modos mi pregunta es la primera, ¿cómo puedo hacer que detecte que el valor ha cambiado solamente con introducir un carácter?

Espero haberme explicado bien.

1 respuesta 1

2

Tal vez puedas hacerlo usando el evento keyup:

$(document).ready(function() {
    $("#prueba").on("keyup", function() {
        var largo = $("#prueba").val().length
        // Ocultar o mostrar de acuerdo al largo del texto
        if (largo > 0) {
            $("#actualizar").css("display", "block");
        } else {
            $("#actualizar").css("display", "none");
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="prueba" type="number" placeholder="Escribe un número">
<button id="actualizar" style="display: none;" type="button">Actualizar</button>
  

También es posible hacerlo usando keyup() que no es más que un "shortcut" para on("keyup", handler) como está explicado en la documentación.

Tu Respuesta

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

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