用输入值更改背景颜色

我有一个窗体，用户可以在其中设置六色。我想在输入“颜色”旁边放一个块，并且此块根据输入值更改背景颜色。我想动态地做这个，有点像颜色选择器。我认为我们可以用js做到这一点，但我不知道如何。如果可以帮助的话，我也会用轨道做这个。用输入值更改背景颜色

我已经有这个

<div class="field color"> 
    <label for="activite_color">Color</label> 
    <input type="text" value="BF4139" name="activite[color]" id="activite_color" /> 
    <span class="col-lg-1" style="background:#BF4139;"></span> 
</div>

而且fiddle

来源

2015-05-29 Simon M.

你需要从头开始构建自己的，还是可以使用其中的插件？ –

添加maxlength="6"到textbox：

HTML：

<input type="text" value="BF4139" name="activite[color]" id="activite_color" maxlength="6" />

的JavaScript：

$('#activite_color').on('keyup', function() { 
    $('.col-lg-1').css('background', '#' + $(this).val()); 
});

演示：https://jsfiddle.net/tusharj/rt7h6wd3/1/

来源

2015-05-29 13:52:32 Tushar

谢谢，这正是我想要的 –

@SimonM。欢迎！很高兴我能帮上忙 – Tushar

我输入

$('#activite_color').on('input', function() { 
    $('.col-lg-1').css('background', '#' + $(this).val()); 
});

有任何的答案迄今将工作虽然

https://jsfiddle.net/rt7h6wd3/3/

来源

2015-05-29 13:53:37 George

$(function() { 
    $('#activite_color').change(function() { 
     $('.col-lg-1').css('background', '#' + $(this).val()); 
    }); 
});

检查更新在你所做的jsfidder上。

来源

2015-05-29 13:59:06

你可以这样做。

HTML： <input type="text">

Script 
$("input").blur(function(){ 
    var col = "#" + $("input").val(); 
    $("body").css("background-color", col); 
});

记住颜色代码是6位。所以在文本框中输入6位数字。

来源

2015-05-29 14:10:03

用输入值更改背景颜色

回答

相关问题