Obtention d'une entrée de formulaire avec Javascript ou jQuery pour la manipulation des couleurs d'arrière-plan

Question

Comment puis-je obtenir des entrées de formulaire en temps réel et les utiliser pour modifier la couleur d'arrière-plan des éléments?

J'ai un champ d'entrée qui accepte les valeurs hexagonales six chiffres:

<input name="acct-bcolor" id="acct-bcolor" class="color" value="141414"> 

Merci à l'avance. -B

Answer 1

Cela devrait le faire:

function updateColor(){ 
    var len = $('#acct-bcolor').val().match(/[0-9A-F]{1}/ig).length; 
    if(len == 3 || len == 6) 
     $('body').css('background-color','#'+$('#acct-bcolor').val()); 
} 
updateColor(); // Run once at page load 
$('#acct-bcolor').bind('focus',function(){ 
    $(this).bind('keyup', updateColor); 
}).bind('blur.bgcolor',function(){ 
    $(this).unbind('keyup'); 
}); 

Test case

Answer 2

Vous pouvez essayer celui-ci:

function validateColor (color) { 
    var strColor = color.toString(); 
    return !!strColor.match(/^([\da-f]{3}|[\da-f]{6})$/i); 
} 

$('#acct-bcolor').change(function() { 
     var currentColor = $(this).val(); 
     if(validateColor(currentColor) { 
      $('#colorPreview').css({'background-color' : '#'+ currentColor}); 
     } 
    } 
);