Question

我正在创建一个用户必须键入多个必填文本字段的Web应用程序。为了通知用户，他/她必须输入所有粉红色文本字段。我通过这个给了他们粉红色的背景:(注意我使用的是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");
    }
});

这很好用，但我也使用微调器（和滑块）来更改文本字段的值。为此，我输入了这个：

$(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");
    }
});

但是，这仅在用户单击字段外时才有效，并且当通过微调器或滑块更改值时，它不会执行任何操作。有什么建议？ PS：我知道这有点啰嗦，但我想尽可能多地提供信息。

Answer 1

在现代浏览器上，请使用oninput：{添加其他浏览器也支持}

$('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");
    }
});

Javascript / jQuery基于值改变文本输入

1 个答案: