Javascript/jQuery 根据值更改文本输入

Question

我正在制作一个网络应用程序，用户必须在其中键入多个必填文本字段。为了通知用户这一点，声明他/她必须输入所有粉红色的文本字段。我通过这个给了他们粉红色的背景:(注意我正在使用 jQuery UI 微调器小部件)

$('input[type="text"]').spinner({min: 0}).css("background-color", "pink");

我想做的是，当用户在字段中键入内容时，将背景颜色更改为白色。我这样做了:

$('input[type="text"]').keyup(function () {
    if ($(this).val().length !== 0) {
        $(this).css("background-color", "white");
    } else{
        $(this).css("background-color", "pink");
    }
});

这很好用，但我还使用微调器(和 slider )来更改文本字段的值。为此，我输入了以下内容:

$(document).click(function () {
    if ($('input[type="text"]').val().length !== 0) {
        $('input[type="text"]').css("background-color", "white");
    } else{
        $('input[type="text"]').css("background-color", "pink");
    }
});

如您所想，这是行不通的。如果一个文本字段中有文本，则单击文档后所有文本字段都会变为白色。我无法指定要以此为目标的文本输入。然后我尝试了 .change() jQuery 函数:

$('input[type="text"]').change(function () {
    if ($(this).val().length !== 0) {
        $(this).css("background-color", "white");
    } else{
        $(this).css("background-color", "pink");
    }
});

但是，这仅在用户单击字段外后才起作用，并且当通过微调器或 slider 更改值时它什么也不做。有什么建议么？PS:我知道这有点啰嗦，但我想提供尽可能多的信息。

Answer 1

在现代浏览器上，使用 oninput 代替:{added other browsers support too}

$('input[type="text"]').on('input DOMAttrModified paste change',function () {
    if ($(this).val().length !== 0) {
        $(this).css("background-color", "white");
    } else{
        $(this).css("background-color", "pink");
    }
});