Question

我有一个文本输入，您可以在其中编写十六进制颜色代码。比我需要Jquery获取输入的内容并将其放置到div的样式，以便它更改div的背景颜色。你能帮助我吗？

<form>
  <label>Set color: </label>
  <input type="text" name="set_color" id="color" />
  <div id="color_result"></div>
</form>

JSFiddle - My code

Answer 1

使用此：

jQuery(function($) {
    $('#color').on('keyup', function() {
        var color = $(this).val();
        $('#color_result').css('background-color', color);
    });
});

Answer 2

要扩展D4V1D的答案，请在其中添加一些验证，例如：

jQuery(function($) {
    $('#color').on('keyup', function() {
        var color = $(this).val();
        if (color.match(/^#[a-f0-9]{6}$/i) !== null){
            $('#color_result').css('background-color', color);
            $('#validation').text('Good color! Have a biscuit!');

        }else{
            $('#validation').text('Bad Color. No doughnut.');
        }
    });
});

请参阅this example

如何使用Jquery获取输入值并将其放在元素的css中

2 个答案: