更改顏色處理程序CSS

我試圖通過在表單中使用input type="color"標記來更改拉引號的背景顏色。我的HTML如下更改顏色處理程序CSS

<form action="change.php" method="post"> 
    name: <input type="text"><br/> 
    email: <input type="email" id="email"><br/> 
    <label for="background-color">Choose a color for background :</label> 
    color: <input type="color" name="bgcolor"><br/> 
    <input type="submit" name="submit" value="Submit"> 
    </form>

你看，我試着從POST得到的顏色值做在PHP中，但我會雷伊如果可能的話像解決這個問題，jQuery中。

來源

2015-11-07 Griehle

_ 「以改變拉動行情的背景顏色」 _什麼是「拉行情」？ – guest271314

拉式報價是一個文本片段，顯示在框中的一面，並且一般顯示較大的文本。這是一個Jquery函數。 – Griehle

您可以通過如下方式實現此目的。您需要輸入id屬性。然後在blur事件中，如果輸入值有效，您將更改div背景色。

此外，你必須在HTML <head>包括jQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

JSFIDDLE

HTML：

<input type="text" name="bgcolor" id="bgcolor" maxlength="6" placeholder="Hex representation of the color">

JQuery的：從here

$(document).ready(function() { 
    $('#bgcolor').on('change', function() { 
     var color = $(this).val(); 
     var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#'+color) 
     if (isOk) { //If input is a valid representation of a color 
      $('#your_div_id').css('background-color', '#'+color); 
     } 
    }); 
});

ISOK正則表達式。

或者使用type="color"：

HTML：

<input type="color" name="bgcolor" id="bgcolor" value="">

JQuery的：

$(document).ready(function() { 
    $('#bgcolor').on('change', function() { 
     var color = $(this).val(); 
     $('#your_div_id').css('background-color', color); 
    }); 
});

UPDATE：

移動以下內$(document).ready(function() {這樣的：

$(document).ready(function() { 

    $('span.pq').each(function() { 
     var quote = $(this).clone(); 
     quote.removeClass('pq'); 
     quote.addClass('pullquote'); 
     $(this).before(quote); 
    }); //end each 

    $('#note').draggable(); 

    $('#bgcolor1').on('change', function() { 
     var color = $(this).val(); 
     $('#id1').css('background-color', color); 
    }); 

    $('#bgcolor2').on('change', function() { 
     var color = $(this).val(); 
     var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#' + color) 
     if (isOk) { //If input is a valid representation of a color 
      $('#id1').css('background-color', '#' + color); 
     } 
    }); 
});

來源

2015-11-07 22:35:55

我能夠以此爲指導讓我的項目按預期工作，並且非常感謝您的幫助！ – Griehle

太棒了！我很高興我幫助你。 –

我可以讓它在JSfiddle中工作，但是當我將該代碼複製到一個活動網站時，它說這個顏色沒有定義。我不知道這是爲什麼。我甚至從小提琴中直接複製了所有的代碼。 – Griehle

更改顏色處理程序CSS

回答

相關問題