使用Javascript或jQuery獲取表單輸入以用於背景顏色操作

Question

如何實時獲取表單輸入並使用它們更改元素的背景顏色？

我有一個輸入框，將接受六位的十六進制值：

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

在此先感謝。 -B

Answer 1

這應做到：

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

你可以試試這個：

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}); 
     } 
    } 
);