jQuery with Input Type = "Number"

Question

Simple question, but I am looking for the right way to handle this.

I've broken it down to the most simplistic example that still shows the problem.

Let's say I have a basic HTML table:

<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>

Then I have a input type:

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

The jQuery is as follows, with redText being basic CSS to change the color to red. I'm handling both the change and keyup events to try to capture two situations.

$(function () {

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

});

The problem is, when they user types a number into the numeric field it works as expected. However, if they then change focus to another input, the CSS reverts.

If they use the numeric up/down selector instead, the change persists after the control loses focus.

What am I missing with the jQuery selector to stop it from reverting when manually entered on losing focus? I've tried the various focus events, blur, etc and can't find one that changes this behavior.

How about $('#colorColumnRed').bind('input' ?

Rayon
– Rayon

2016-04-25 05:05:56 +00:00
Commented Apr 25, 2016 at 5:05 — Rayon
– Rayon, Commented Apr 25, 2016 at 5:05
jsfiddle.net/rayon_1990/8euy18np

Rayon
– Rayon

2016-04-25 05:07:40 +00:00
Commented Apr 25, 2016 at 5:07 — Rayon
– Rayon, Commented Apr 25, 2016 at 5:07
Could you perhaps upload a plunkr or so?

Satej S
– Satej S

2016-04-25 05:10:17 +00:00
Commented Apr 25, 2016 at 5:10 — Satej S
– Satej S, Commented Apr 25, 2016 at 5:10
If only me not understanding the exact problem.

Bhojendra Rauniyar
– Bhojendra Rauniyar

2016-04-25 05:13:58 +00:00
Commented Apr 25, 2016 at 5:13 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Apr 25, 2016 at 5:13
@RayonDabre That was the one, thanks.

Patrick
– Patrick

2016-04-25 05:16:35 +00:00
Commented Apr 25, 2016 at 5:16 — Patrick
– Patrick, Commented Apr 25, 2016 at 5:16

Patrick · Accepted Answer · 2016-04-25 05:09:37Z

1

@Rayon Dabre was quick to answer with the easy, quick fix.

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

answered Apr 25, 2016 at 5:09

Patrick

6,00417 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery with Input Type = "Number"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related