Question

我正在实现预览颜色。当我在输入文本框中输入颜色时，预览div将改变颜色。例如，当输入为＃000时，预览div变为黑色。但是当我开始按退格键时，预览div不会改变颜色。我发出警告来检查输入文本框值，当我开始按退格键时它确实变为'00'。我在这里缺少什么？

这是一个小提琴：https://jsfiddle.net/8atcbfwh/1/

<!-- Jquery code -->
$(document).ready(function() {
  $('#test').on('keyup', function(event) {
    $('#preview').css('background-color', '#' + $('#test').val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Html code -->
<input id="test"></input>
<div id="preview" style="width: 50px;height:50px;border: 1px solid black"></div>

Answer 1

在@Teemu指出.css可能没有附加无效值之后，我在stackoverflow上做了另一次搜索，发现了这个：change background color of div with jquery that has an !important tag

在为预览div指定颜色之前，我现在清除背景颜色，然后给它输入文本框的值。

新工作小提琴：https://jsfiddle.net/8atcbfwh/3/

$('#test').on('keyup', function(event) {
    $('#preview').css('background-color', '');
    $('#preview').css('background-color', '#' + $('#test').val());
    $("#color").html('#' + $('#test').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test"/>
<div id="preview" style="width: 50px;height:50px;border: 1px solid black;"></div>
<div id="color">
</div>

希望这可以帮助某人。

Answer 2

这有助于您：

＆＃13;

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <!-- Html code -->
        <input id="test">
        <div id="preview" style="width: 50px;height:50px;border: 1px solid black"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
        <script>
            $('#test').on('keyup', function(event) {
                if(event.keyCode == 8)
                    $('#preview').css('background-color', '');
                $('#preview').css('background-color', '#' + $('#test').val());
            });
           
        </script>
    </body>
    </html>

＆＃13;

键盘在退格时触发，但预览颜色不会改变

2 个答案: