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正在使用中。
由于您使用的是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 + ""); } }); });
或者只是为了好玩：你可能会喜欢这种更通用的，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; }
有很多方法可以做到：
首先在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) + ""); } }); });
从jQuery页面，关于.text（这里： http ： //api.jquery.com/text/ ）：
我们需要注意，此方法会根据需要转义提供的字符串，以便在HTML中正确呈现。 为此，它调用DOM方法.createTextNode（）， 不将字符串解释为HTML
（强调我的。）
您需要使用.append函数（此处： http ： //api.jquery.com/append/ ）将文本附加到页面，而不是将其放在.text中。
此外，如果您放置新字符串的元素中没有其他内容，您只需使用.html（此处： http ： //api.jquery.com/html/ ）替换容器的全部内容用你的新字符串。