javascript文本字段计数器显示

Question

我使用此处给出的答案 Count textarea characters但需要修改它以对文本字段输入中的字符进行倒计时，并在达到特定倒计时数字限制时更改颜色，以向用户提供某种形式的警告，他们正在接近字段限制。

到目前为止，这是我自己整理的。它确实有效! (惊人地)。首先，这是我的开头:

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

这就是我重新发明的:

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

这就是惊人的效果。除了一个异常(exception)——问题来了。我对 JS 几乎一无所知。当读出的字符数在 2550 到 500 之间时显示正常。当字符读数变为 500 到 100 时，读数显示:

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

那么如何让 JS 真正将 css 踢出正确的显示效果，而不是简单地在页面上回显？

如果相关，则说明正在使用 jQuery。

Answer 1

或者，只是为了好玩:您可能喜欢这种更通用的 css/data-attributes 而不是 jquery 方法:

[].slice.call(
  document.querySelectorAll('div[data-isRestrictedTextArea]')
).forEach(
  function(el) {
    var txtarea = el.querySelector('textarea')
       ,cntr = el.querySelector('div[data-iscounter]');
    
    cntr.setAttribute('data-maxlen', el.getAttribute('data-maxlen'));
    txtarea.onkeyup = count;
  }  
);

function count(e) {
  var len  = this.value.length,
      cntr = this.parentNode.querySelector('div[data-iscounter]'),
      maxl = this.parentNode.getAttribute('data-maxlen'),
      warn = maxl-Math.floor(0.2*maxl), // 80%  
      stop = maxl-Math.floor(0.1*maxl); // 90%

  cntr.setAttribute('data-ncharacters', len);
  cntr.className = len >= stop ? 'stop'
                   : len >= warn ? 'warn' 
                   : '';
  // truncate if len>=maxlen
  this.value = len >= maxl ? this.value.substr(0, maxl) : this.value;
  // set attribute for reporting
  cntr.setAttribute('data-ncharacters', len >= maxl ? maxl : len);
  return;
}

body {font: 12px/15px normal verdana,arial;}

div[data-isrestrictedTextarea] {
  display: inline-block;
  margin-top: 1em;
}

div[data-iscounter] {
  color: green;
  background-color: #eee;
}

div[data-iscounter]:before {
  content: 'you typed 'attr(data-ncharacters)' characters';
}

div[data-iscounter]:after {
    content: ' [max 'attr(data-maxlen)' characters]';
}

div[data-iscounter].warn {
  color: orange;
}

div[data-iscounter].stop {
  color: red;
}

<div data-isrestrictedTextarea="1" data-maxlen="15">
  <textarea placeholder="start typing" rows="2" cols="60"></textarea>
  <div id="cnt_cnttxt" data-iscounter="1" data-ncharacters="0"></div>
</div>

<div data-isrestrictedTextarea="1" data-maxlen="100">
  <textarea placeholder="start typing" rows="5" cols="60"></textarea>
  <div id="cnt_cnttxt" data-iscounter="1" data-ncharacters="0"></div>
</div>