jquery - 失去焦点时更改已填充文本框的颜色

Question

我想在填充并失去焦点时更改填充文本的颜色。我创建的表单要求至少填写一个字段。

我已经尝试过 :required、:valid 但这会改变所有字段的颜色

<form action="h.php" method="post" onsubmit="return formcheck()">
    <div class="least1">
        <label for="cb1">MAKAUT Development Fees:</label>
        <input type="text" name="cb1" value="" placeholder="0"><br>
    </div>
    <div class="least1">
        <label for="cb2">MAKAUT Registration Fees:</label>
        <input type="text" name="cb2" value="" placeholder="0"><br>
    </div>
    <button>Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    function formcheck(){
        var total=0;
        var fields = $(".least1")
        .find("input").serializeArray();
        $.each(fields, function(i, field) {
            if (field.value!="")
                total=total+parseInt(field.value);
        }); 
        // console.log(fields);
        if(total==0){
            alert("Fill at least one field.");
            return false;
        }
        else{
            if(confirm("Total amount to be paid= "+total))
                return true;
            else
                return false;
        }
    }
    jQuery(function ($) {
        var $inputs = $('input[name=cb1],input[name=cb2]');
        $inputs.on('input', function () {
            // Set the required property of the other input to false if this input is not empty.
            $inputs.not(this).prop('required', !$(this).val().length);
            $inputs.css({
                "border-color": "red", 
                "font-weight": "bold"
            }) ;
        });
    });

</script>

所有字段都改变颜色，而不是一个。

Answer 1

因为你有一个占位符，你可以使用这个:

.myInput:not(:placeholder-shown):not(:focus) { /* change stuff */ }

如果表单没有值，将显示占位符。因此，如果它有一个值/用户输入了一些数据(也就是 :placeholder-shown 不正确)并且它失去焦点(也就是 :focus 不正确) - 将应用样式。