javascript文本字段计数器显示 [英] javascript text field counter display

问题描述

我正在使用此处给出的答案计算textarea字符，但需要对其进行修改以进行计数文本字段中的向下字符输入并在达到一定的计数下限数值时更改颜色，以向用户提供某种形式的警告，表示他们已接近该字段限制.

I'm using an answer given here Count textarea characters but need to modify it to count down characters in a text field input AND change colour as it hits certain count down numerical limits, to give the user some form of warning they are approaching the field limitation.

这是我到目前为止独自完成的工作.它实际上有效！ (令人惊讶).首先，这是我的开始:

This is what I have put together so far, on my own. It actually works! (Amazingly). First, this is what I started with:

$(window).load(function() {
    $("#input_4_1").keyup(function() {
        $("#count_4_1").text("Characters remaining: " + (2550 - $(this).val().length));
    });
});

这就是我将其重新发明为:

And this is what I have re-invented it as:

$(window).load(function() {
    $("#input_4_1").keyup(function() {
        if (2550 - $(this).val().length >= 501) {
            $("#count_4_1").text("Characters remaining: " + (2550 - $(this).val().length));
        } else if ((2550 - $(this).val().length <= 500) && (2550 - $(this).val().length >= 101)) {
            $("#count_4_1").text("<span style=\"color: #55a500;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>");
        } else if (2550 - $(this).val().length <= 100) {
            $("#count_4_1").text("<span style=\"color: #ff0000;\">Characters remaining: " + (2550 - $(this).val().length) + "</span>");
        }
    });
});

这就是惊人的工作原理.除了一个例外-问题就来了.我对JS几乎一无所知.当字符数读数在2550至500之间时，显示良好.当字符读数变为500到100时，读数将显示:

And this is what amazingly works. With one exception - and here comes the question. I know next to nothing about JS. When the character number read-out is between 2550 and 500 the display if fine. When the character read-out becomes 500 to 100 the read-out shows:

<span style="color: #55a500;">Characters remaining: 499</span>

那么我如何让JS真正将CSS踢到适当的显示效果，而不是简单地在页面上回显?

So how do I get the JS to actually kick the css into proper display effect, instead of simply echoing out on the page??

如果相关，则使用jQuery.

If relevant, jQuery is in use.

推荐答案

由于您使用的是HTML标签，因此无法使用.text()方法进行设置.请使用.html()方法:

Since you're using HTML tags, you cannot set them using the .text() method. Use the .html() method instead:

我添加了一些清理代码..在变量中设置计算以使其更干净...

$(window).load(function() {
    $("#input_4_1").keyup(function() {
        var diff = (2550 - $(this).val().length);
        if (diff >= 501) {
            $("#count_4_1").html("Characters remaining: " + diff);
        } else if ((diff <= 500) && (diff >= 101)) {
            $("#count_4_1").html("<span style=\"color: #55a500;\">Characters remaining: " + diff + "</span>");
        } else if (diff <= 100) {
            $("#count_4_1").html("<span style=\"color: #ff0000;\">Characters remaining: " + diff + "</span>");
        }
    });
});

这篇关于javascript文本字段计数器显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！