Javascript计算textarea中剩余的字符

Question

我只是想在 textarea 中输入时计算剩余的字符。 我对 Javascript 很陌生，我写了这段代码，但它不起作用，我不知道为什么。

它不算什么。 一直显示 0 / 300。

html文件中的代码：

<p>  <textarea name="Inhalt" id="Inhalt" placeholder="Ihre Nachricht..." rows="5" maxlength="300 
</textarea> </p>
    
<div id="the-count">
 <span id="current">0</span>
 <span id="maximum">/ 300</span>
</div>

<script src="textarea_count.js"></script>

textarea_count.js 中的代码：

$('textarea').onkeyup(function() {

var characterCount = $(this).val().length,
  current = $('#current'),
  maximum = $('#maximum'),
  theCount = $('#the-count');

current.textContent(characterCount);


if (characterCount < 100) {
current.css('color', '#666');
}
if (characterCount > 99 && characterCount < 140) {
current.css('color', '#6d5555');
}
if (characterCount > 139 && characterCount < 200) {
current.css('color', '#793535');
}
if (characterCount > 199 && characterCount < 250) {
current.css('color', '#841c1c');
}
if (characterCount > 249 && characterCount < 299) {
current.css('color', '#8f0001');
}

if (characterCount >= 300) {
maximum.css('color', '#8f0001');
current.css('color', '#8f0001');
theCount.css('font-weight','bold');

} else {
maximum.css('color','#666');
theCount.css('font-weight','normal');
}

  
});

*请注意，我从 html 部分删除了不重要的代码，因为它与 textarea 无关，只是没有必要考虑。

Answer 1

我了解您是 JavaScript 新手。 但是在您的代码中，您将 jquery 与 javascript 混合使用，因此您会出现一些错误。

.onkeyup(function()是 jquery 中的一个 javascript function = on('keyup', function(){}

textContent是纯 javascript = text(在 jquery.

另外，请在浏览器中检查开发人员的控制台。 当某些东西不起作用时，这是您首先查看的地方

 $('textarea').on('keyup',function(){ var characterCount = $(this).val().length, current = $('#current'), maximum = $('#maximum'), theCount = $('#the-count'); current.text(characterCount); if (characterCount < 100) { current.css('color', '#666'); } if (characterCount > 99 && characterCount < 140) { current.css('color', '#6d5555'); } if (characterCount > 139 && characterCount < 200) { current.css('color', '#793535'); } if (characterCount > 199 && characterCount < 250) { current.css('color', '#841c1c'); } if (characterCount > 249 && characterCount < 299) { current.css('color', '#8f0001'); } if (characterCount >= 300) { maximum.css('color', '#8f0001'); current.css('color', '#8f0001'); theCount.css('font-weight', 'bold'); } else { maximum.css('color', '#666'); theCount.css('font-weight', 'normal'); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea name="Inhalt" id="Inhalt" placeholder="Ihre Nachricht..." rows="5" maxlength="300"></textarea> <div id="the-count"> <span id="current">0</span> <span id="maximum">/ 300</span> </div>