颜色处理程序更改CSS - color handler changing CSS

color handler changing CSS

本文关键字：CSS 程序处理颜色 | 更新日期: 2023-09-27

我正试图通过在表单中使用input type="color"标记来更改拉引号的背景色。我的HTML如下

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

你看，我试图在PHP中通过从POST中获取颜色值来实现这一点，但如果可能的话，我确实想在Jquery中解决这个问题。

您可以通过以下方式实现这一点。您需要一个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:

$(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 regex。

或使用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);
    });
});

更新：

像这样在$(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);
        }
    });
});