2

入力フィールドを空白のままにしてデータを消去すると、A "0"を入力しない限り、背景は元の色に戻りません。

空白のときに元の色に戻すには、DIVの背景色が必要です。

私は何が間違っているのですか？

<script>
$(document).ready(function() {

    $("#id").keypress(function() {
        if ($("#id").val().length > 0) $("#in").css("background-color", "red");
        else {
            if ($("#id").val().length == 0) $("#in").css("background-color", "grey");
        }
    });

});​
</script>
4

5 に答える 5

3

問題はkeypress、キーのアクションが実行される前に呼び出されるを使用しているためです。これを使用した場合は機能しますkeyup：

$("#id").keyup(function() {
    if ($(this).val().length > 0) {
        $("#in").css("background-color", "red");
    }
    else {
        $("#in").css("background-color", "grey");
    }
});

また、@ mblase75が指摘しているようlengthに、else条件で値のをテストする必要はありません。

フィドルの例

このコードをさらに単純化したい場合は.val().length、正の整数がtrueに等しいため、条件として三項ステートメントを使用できます。

$("#id").keyup(function() {
    $(this).css("background-color", $(this).val().length ? "red" : "grey");
});
于 2012-04-09T14:01:08.837 に答える
2

keyup入力したばかりの文字を説明するために使用する必要があります。

$(function(){
    $("#id").keyup(function() {
        $("#in").css("background-color", $(this).val().length > 0 ? "red" : "grey");
     });
 });​

これがデモンストレーションするjsFiddleです。

于 2012-04-09T14:02:03.143 に答える
0

これは動作するはずです...

<script>

$(document).ready(function() {

    $("#id").keyup(function() {
        if($("#id").val().length > 0) {
           $("#in").css("background-color", "red");
        }
        else {
           $("#in").css("background-color", "grey");
        }
    });
});​

</script>
于 2012-04-09T14:00:59.150 に答える
0

あなたの場合、input.val().length が変更される前に「keypress」イベントが呼び出されました。そして、コード実行セレクターは 5 回取得し、1 回挿入しました。

このコードを見てください、それはうまくいきます：

html:

<input id="id" type="text" autocomplete="off">
<div class="in"></div>​​​

CSS:

.in {width:200px; height:20px; background-color:#grey;}
.in-red {background-color:red;}

js:

$(function(){
    var $in = $('.in');
    $('#id').on('keyup', function(){
        $this = $(this);
        if ($this.val().length > 0) {
            $in.addClass('in-red');
        } else {
            $in.removeClass('in-red');
        }
    });
});​

そして、 http://jsfiddle.net/Qhkev/1/でテストできます

于 2012-04-09T14:20:56.060 に答える