1

オートコンプリートを使用してテキスト フィールドにデータを入力しています。ユーザーがテキストを入力してもオートコンプリートから選択しない場合、そのテキスト フィールドを強調表示したいと思います。

したがって、以下の jquery では次のようになります。

var createAutocomplete = function () {
    var $input = $(this);

    var options = {
        source: $input.attr("data-scd-autocomplete"),
        select: updateAutocompleteForm,
        close: errorAutocompleteForm
    };

    $input.autocomplete(options);
};

ユーザーがリストからの選択に失敗すると、この関数を呼び出す close イベントが発生します。

   var errorAutocompleteForm = function(event, ui) {
        var $input = $(this);
        $input.removeAttr('class');
        $input.attr('class', '');
        $input.addClass("input-validation-error");
    };

そこで、テキスト フィールドから既存のクラスを削除し、"input-validation-error" クラスを挿入します。ただし、このクラスの CSS は表示されず、IE 開発者ツールでは、このクラスの CSS がオーバーライドされていることが示されます。この CSS がオーバーライドされないようにするにはどうすればよいですか?

4

1 に答える 1

0

私は自分のCSSで問題を見つけました。CSSクラスを要素タイプに接続する必要がありました

input[type="text"].input-validation-error,
input[type="search"].input-validation-error,
input[type="password"].input-validation-error {
    border: solid 1px #e80c4d;
}

そのため、以前input[type="search"].input-validation-errorは行方不明でした。そしてクラス

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

無視されました。なぜこの答えが解決策なのか理解できません。したがって、これを説明できる人はアップティックを利用できます。

于 2013-07-08T09:03:24.157 に答える