Javascript 颜色处理程序更改CSS

我试图通过在表单中使用

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中通过从帖子中获取颜色值来实现这一点，但如果可能的话，我真的想在Jquery中解决这个问题。

可以通过以下方法实现这一点。输入时需要

id

属性。然后在

blur

事件中，如果输入值有效，您将使用输入值更改

div

背景色

此外，还必须在html

中包含jQuery

isOk正则表达式来自

---

---

或使用

type=“color”

：

HTML:

---

---

---

更新：

在

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

---

“更改拉引号的背景色”什么是“拉引号”？Pull Quote是一个文本片段，显示在框的侧面，通常带有较大的文本。它是一个Jquery函数。我可以使用它作为指导，使我的项目按预期工作，非常感谢您的帮助！太好了！我很高兴我帮助了您。我可以让它在JSFIDLE中工作，但当我将代码复制到一个实时si时te，它说颜色没有定义。我不知道为什么。我甚至直接从小提琴上复制了所有的代码。你的脚本中包括jQuery吗？是的。我用的是1.11.0，我在小提琴上试过。它起作用了，我试着更新到2.x，不管你用什么。我也有表单所在的可拖动功能。可拖动功能没有在小提琴中工作，是活的。颜色变化不是活的，而是在小提琴中工作。

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

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

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

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

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