更改颜色处理程序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

回答

相关问题