在退格键火，但预览颜色不改变

Keyup fires on backspace but preview color does not change

本文关键字：颜色 改变      更新时间：2023-09-26

我正在实现一个预览颜色。当我在输入文本框中输入颜色时，预览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>

@Teemu指出。css可能没有附加无效值后，我又在stackoverflow上搜索了一下，发现了这个:用jquery改变div的背景颜色，它有一个重要的标签

在给预览div分配颜色之前，我现在清除了background-color，然后给它输入文本框的值。

新的工作小提琴在这里: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>

希望对大家有所帮助

这对你有帮助:

<!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>

相关文章：