Question

我有一个表格，用户可以在其中设置六边形颜色。我想在输入“颜色”旁边放一个块，并且该块根据输入值改变背景颜色。我想动态地制作它，有点像颜色选择器。我想我们可以用js做到这一点，但我不知道怎么做。如果有帮助的话，我也可以使用rails。

我已经有了这个

<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

Answer 1

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

Answer 2

我有输入

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

到目前为止的任何答案都可以使用

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

Answer 3

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

检查你的jsfidder上的更新。

Answer 4

你可以这样做。

HTML： <input type="text">

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

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

使用输入值更改背景颜色

4 个答案: