jQuery z Input Type = "Number"

Question

Proste pytanie, ale szukam odpowiedniego sposobu, aby sobie z tym poradzić.

Rozbiłem to na najbardziej uproszczony przykład, który nadal pokazuje problem.

Powiedzmy mam podstawowy tabeli HTML:

<table id="customerTable"> 
    <caption class="bg-primary h4">Customer Overview</caption> 
    <thead> 
     <tr> 
      <th>Customer ID</th> 
      <th>Customer Name</th> 
      <th># Projects</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Enterprise Management</td> 
      <td>14</td> 
     </tr> 
     <tr> 
      etc ... 
     </tr> 
    </tbody> 
</table> 

to mam Typ wejścia:

<input id="colorColumnRed" type="number" /> 

JQuery jest następujący, z redText będąc podstawową CSS, aby zmienić kolor czerwony. Obsługuję zarówno zdarzenia change, jak i keyup, aby spróbować uchwycić dwie sytuacje.

$(function() { 

    $('#colorColumnRed').bind('change keyup', function() { 
     var colId = $('#colorColumnRed').val(); 
     $('#customerTable td:nth-child(' + colId + ')').toggleClass('redText'); 
    }); 

}); 

Problem jest, gdy użytkownik rodzaje numer w polu numerycznym to działa zgodnie z oczekiwaniami. Jeśli jednak następnie ustawią fokus na inne wejście, CSS wróci do stanu z dnia.

Gdyby użyć numeryczną selektor w górę/w dół zamiast zmiana utrzymuje po kontroli traci ostrość.

Czego brakuje mi w selektorze jQuery, aby zapobiec przywracaniu po ręcznym wprowadzeniu do utraty ostrości? Próbowałem różnych zdarzeń focus, blur itp. I nie mogę znaleźć takiego, który zmienia to zachowanie.

Answer 1

@Rayon Dabre szybko odpowiedział, łatwo i szybko.

$('#colorColumnRed').bind('input')