0

私はこのマークアップを持っています：-

<textarea id="TextBox1"></textarea>
<span id="validator"></span>

そして次のjQuery：-

jQuery('#TextBox1').live('input', function() {
    var charLength = $(this).val().length;
    $('#validator').html(charLength + ' of 250 characters used');
    if ($(this).val().length > 250) {
        $('#validator').html('<strong>You may only have up to 250 characters !</strong>');
    } 
});

これは正常に機能します。

上記のjQueryを変更して、#validator表示されたときにフェードインし、長さが0に低下した場合にもフェードアウトするようにします（現在、これは行わず、メッセージは画面に表示されたままになります）。

編集：追加するのを忘れました、私は次の機能も持っています：-

jQuery.fn.fadeInOrOut = function(status) {
    return status ? this.fadeIn() : this.fadeOut();
};

私は以下を試しましたが、効果がないようです：-

$('#validator').html(charLength + ' of 250 characters used').fadeInOrOut(!! charLength);

と...

$('#validator').html(charLength + ' of 250 characters used');
$('#validator').fadeInOrOut(!! charLength);
4

2 に答える 2

1

これを参照してください：http：//jsfiddle.net/CsXU8/3/

バリデーターのオンロードを非表示にする必要があります（cssを使用）。それ以外の場合はフェードインできません。

したがって、この行をcssに追加します。

#validator {display:none}

トリックを行う必要があります。

于 2012-05-28T07:26:06.913 に答える
0

のスタイルを設定して#validatorからdisplay:none 、これを使用します

jQuery('#TextBox1').live('input', function() {
    var charLength = $(this).val().length;
    $('#validator').html(charLength + ' of 250 characters used');    
    if ($(this).val().length > 250) {
        $('#validator').html('<strong>You may only have up to 250 characters !</strong>');
    }
    $('#validator').fadeIn(200);
    if(charLength == 0)
    $('#validator').fadeOut(200); 
});
于 2012-05-28T07:27:25.457 に答える