Tengo este código y quiero agregar la clase activa al botón (retirar-btn) cuando empiezo a escribir la entrada y lo elimino nuevamente si eliminé el texto que ingresé en la entrada (cuando la entrada está vacía).
El código funciona bien, pero el problema es que la clase activa no se agrega cuando empiezo a escribir la entrada, por lo que debo hacer clic fuera de esa entrada.
Quiero agregar una clase activa, simplemente comience a escribir y elimínela, simplemente elimine el texto en la entrada.
** Lo siento por el mal lenguaje
HTML
<div class="row"> <div class="col-12 col-md-6"> <div class="withdrawal-amount"> <p>Withdrawal Amount (Minimum required: $10)</p> <input type="text" placeholder="$10" class="withdrawal-amount-input"> </div> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="withdraw-btn-upper"> <a href="#" class="withdraw-btn">Withdraw</a> </div> </div> </div>JavaScript
function addActiveclass() { $(".withdrawal-amount-input").on("change", function(){ if($(this).val() == "") $(".withdraw-btn").removeClass('active'); else $(".withdraw-btn").addClass('active'); }); } addActiveclass();Escuche el evento de input en su lugar:
function addActiveclass() { $(".withdrawal-amount-input").on("input", function(){ if($(this).val() == "") $(".withdraw-btn").removeClass('active'); else $(".withdraw-btn").addClass('active'); }); } addActiveclass(); .active{ background-color: yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-12 col-md-6"> <div class="withdrawal-amount"> <p>Withdrawal Amount (Minimum required: $10)</p> <input type="text" placeholder="$10" class="withdrawal-amount-input"> </div> </div> <div class="col-12 col-sm-6 col-md-3"> <div class="withdraw-btn-upper"> <a href="#" class="withdraw-btn">Withdraw</a> </div> </div> </div>