web-dev-qa-db-fra.com

Comment changer la couleur de la bordure d'entrée avec jQuery en fonction de sa valeur?

J'ai une question à propos de jQuery. J'ai le code ci-dessous qui fonctionne bien; il change inputborder-color en fonction de sa valeur, qui est tapée et entrée. Mais si dans la valeur de input lors du chargement de page, cela ne change pas ce border-color. Comment puis-je modifier le border-color depuis le début, après le chargement de la page?

Je vous remercie :)

<input type="text" class="col" value="">


// When the <input>'s value changes
$("input").change(function() {

// If the value is less than 7, add a red border
if ($(this).val() < 7) {
    $(this).css("border", "5px solid red");
}

// Else if the value is equal to 7, add a green border
else if ($(this).val() == 7) {
    $(this).css("border", "5px solid green");
}

// Else if the value is greater than 7, add an orange border
else if ($(this).val() > 7) {
    $(this).css("border", "5px solid orange");
}

// Else if the value is anything else, add a black border
else {
    $(this).css("border", "5px solid black");
}

});
jqueryinputcolors
11
Lasha

Il suffit de déclencher l'événement:

$("input").change(function() {
    // ...
}).trigger("change");

DEMO:http://jsfiddle.net/9B5SX/1/

10
VisioN

Je suggérerais:

$('input').on('change', function(){
    var v = parseInt(this.value, 10);
    $(this).css('border', function(){
        if (v < 7) {
            return '5px solid #f00';
        }
        else if (v == 7) {
            return '5px solid #0f0';
        }
        else if (v > 7) {
            return '5px solid #f90';
        }
        else {
            return '5px solid #000';
        }
    });
}).change();

Démo de JS Fiddle .

Honnêtement, étant donné que chaque situation semble nécessiter un border-width de 5px et un border-style de solid, je définirais ces parties dans le CSS:

input {
    border-width: 5px;
    border-style: solid;
}

Et simplement mettre à jour le border-color dans jQuery:

$('input').on('change', function(){
    var v = parseInt(this.value, 10);
    $(this).css('border-color', function(){
        if (v < 7) {
            return '#f00';
        }
        else if (v == 7) {
            return '#0f0';
        }
        else if (v > 7) {
            return '#f90';
        }
        else {
            return '#000';
        }
    });
}).change();

Démo de JS Fiddle .

Et, enfin, juste parce que parfois je ne peux pas m'en empêcher (et bien que cette approche puisse être adoptée, ce n'est pas celle que je peux honnêtement recommander ...), avec des opérateurs conditionnels ajoutés:

$('input').on('change', function(){
    var v = parseInt(this.value, 10);
    $(this).css('border-color', function(){
        var v = parseInt(this.value,10);
        return isNaN(v) ? '#000' : v < 7 ? '#f00' : v == 7 ? '#0f0' : '#f90';
    });
}).change();

Démo de JS Fiddle .

Références:

6
David Thomas

Même problème ici. Dans mon cas, l'entrée était une colonne de table et elle était affichée pour chaque ligne de la table. Avec le code suivant, j'ai réussi à changer une seule couleur d'entrée, pas tout lorsque j'ai changé la valeur d'une.

         $('input[type=number]').each(function () {

             /* Change border color depending on the input value */
             var value = parseInt(this.value, 10);
             if (value != 0) {
                 $(this).css('border-color', function () {
                     return value ? 0 : '#bfbfbf', '#f32d83';

                 });

             }
             else {
                 $(this).css('border-color', '#bfbfbf');
             }

         });

J'espère que ça aide 

1
Berintan Anca