Javascript 输入长度大于0无法正常工作

我试图写一些代码，如果输入为空，输入颜色将变为红色。用户输入后，红色将被删除

Html

jQuery

$(document).ready(function () {
    $("#financeSearch").keydown(function () {
        if ($("#financeSearch").val().length>0){
            $("#financeSearch").removeClass("redColor")
        }
    });
    $(document).bind('keypress', function(e) {
        if(e.keyCode==13){
            $('#financeBtn').trigger('click');
        }
    });
    $("#financeBtn").click(function () {
        var financeKey = $("#financeSearch").val();
        if (financeKey == ""){
            $("#financeSearch").addClass("redColor")
        }
});

---

当按钮被提交时，输入得到redColor类。如果用户键入红色，我希望红色被删除。但在输入2个字符后，就可以完成了。我希望在输入的第一个字符之后输入。

当调用

键时，最后输入的字符尚未添加到输入值中。这就是为什么需要输入两个字符来删除红色

您应该使用
keyup
而不是
keydown

您不需要在事件处理程序中选择
$（“#financeSearch”）
，只需使用
$（this）

也无需比较
长度
大于
0
。您可以直接放入
$（this）.val（）.length
，因为数字中除
0
以外的所有值都是真实的


$（文档）.ready（函数（）{
$（“#financeSearch”）.keyup（函数（）{
if（$（this.val（）.length）{
$（此）.removeClass（“红色”）
}
});
$（文档）.bind（'keypress'，函数（e）{
如果（e.keyCode==13）{
$（'financeBtn'）。触发器（'click'）；
}
});
$（“#financeBtn”）。单击（函数（）{
var financeKey=$（“#financeSearch”）.val（）；
如果（financeKey==“”）{
$（“#financeSearch”）.addClass（“红色”）
}
});
});
.redColor{
颜色：红色；
}
实际上，您可以使用CSS和单个HTML属性来完成这一切。
还要注意的是，至少在Chrome中，为了定位占位符的颜色，您需要在CSS中明确地执行此操作


：无效，：无效：：占位符{
颜色：红色；
盒影：无；
}
通过一个小脚本，您可以使用CSS（cough）非常优雅地解决这个问题，您应该使用
输入
事件。
.redColor{
    color: red;
}

$(document).ready(function () {
    $("#financeSearch").keydown(function () {
        if ($("#financeSearch").val().length>0){
            $("#financeSearch").removeClass("redColor")
        }
    });
    $(document).bind('keypress', function(e) {
        if(e.keyCode==13){
            $('#financeBtn').trigger('click');
        }
    });
    $("#financeBtn").click(function () {
        var financeKey = $("#financeSearch").val();
        if (financeKey == ""){
            $("#financeSearch").addClass("redColor")
        }
});