javascript文本字段计数器显示

我正在使用此处给出的答案计算textarea字符，但需要修改它以对文本字段输入中的字符进行倒计时并更改颜色，因为它达到某些倒数数字限制，以便为用户提供某种forms的警告他们正在接近该字段局限性。

这就是我到目前为止所依据的。 它确实有效！ （令人惊讶的）。 首先，这是我开始的：

$(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 = 101)) { $("#count_4_1").text("Characters remaining: " + (2550 - $(this).val().length) + ""); } else if (2550 - $(this).val().length <= 100) { $("#count_4_1").text("Characters remaining: " + (2550 - $(this).val().length) + ""); } }); }); 

这就是令人惊讶的作品。 有一个例外 – 这就是问题所在。 我对JS几乎一无所知。 当读出的字符数在2550和500之间时，显示如果正常。 当字符读出变为500到100时，读数显示：

 Characters remaining: 499 

那么如何让JS实际上将css放到正确的显示效果中，而不是简单地在页面上回显？

如果相关，jQuery正在使用中。

Answer 1

由于您使用的是HTML标记，因此无法使用.text()方法进行设置。 改为使用.html()方法：

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

 $(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("Characters remaining: " + diff + ""); } else if (diff <= 100) { $("#count_4_1").html("Characters remaining: " + diff + ""); } }); }); 

Answer 2

或者只是为了好玩：你可能会喜欢这种更通用的，css / data-atributes而不是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; } 

Answer 3

有很多方法可以做到：

首先在HTML中创建一个标记：

 
 /* Exactly above or below your text box */ 

接下来你可以使用JS：

使用Javascript：

 var html= "Characters remaining: 499"; document.getElementById("warning").innerHtml(html); 

使用Jquery：

 var html= "Characters remaining: 499"; document.getElementById("warning").innerHtml(html); $('#warning').html(html); 

要么

 $(window).load(function() { $("#input_4_1").keyup(function() { if (2550 - $(this).val().length >= 501) { $("#count_4_1").html("Characters remaining: " + (2550 - $(this).val().length)); } else if ((2550 - $(this).val().length <= 500) && (2550 - $(this).val().length >= 101)) { $("#count_4_1").html("Characters remaining: " + (2550 - $(this).val().length) + ""); } else if (2550 - $(this).val().length <= 100) { $("#count_4_1").html("Characters remaining: " + (2550 - $(this).val().length) + ""); } }); }); 

Answer 4

从jQuery页面，关于.text（这里： http ： //api.jquery.com/text/ ）：

我们需要注意，此方法会根据需要转义提供的字符串，以便在HTML中正确呈现。 为此，它调用DOM方法.createTextNode（）， 不将字符串解释为HTML

（强调我的。）

您需要使用.append函数（此处： http ： //api.jquery.com/append/ ）将文本附加到页面，而不是将其放在.text中。

此外，如果您放置新字符串的元素中没有其他内容，您只需使用.html（此处： http ： //api.jquery.com/html/ ）替换容器的全部内容用你的新字符串。