首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >JS onKeyup计数器-如何在他变成负数时改变计数器的颜色?

JS onKeyup计数器-如何在他变成负数时改变计数器的颜色?
EN

Stack Overflow用户
提问于 2018-09-27 07:15:14
回答 1查看 69关注 0票数 1

代码语言:javascript
复制
$(function(){

        function limitaCaracteres(input, counter, limit){
          $('.'+counter).text(limit+' restantes');
          var left;
          $('.'+input).on('keyup', function(e){
            var qtdCaracteres = $(this).val().length;
            left = limit-qtdCaracteres;
            $('.'+counter).text(left+' restantes');

          });
        }
        limitaCaracteres('text1', 'count1', 10);
      });
代码语言:javascript
复制
<!doctype html>
<html>
  <head>
    <title></title>
  </head>
  <body style="background-color: #EAEAEA;">
      <input type="text" name="title" class="input100 text1" autocomplete="off" required>     
      <span class="focus-input100" data-placeholder="Title"></span>
      <span class="count1"></span>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    </body>
</html>

我想改变计数器的颜色,最初的颜色应该是绿色,当计数器变成负数时,颜色应该是红色。

示例:

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-27 07:28:47

您可以按如下方式使用:

代码语言:javascript
复制
    $(function(){

function limitaCaracteres(input, counter, limit){
  $('.'+counter).text(limit+' restantes');
  var left;
  $('.'+input).on('keyup', function(e){
    var qtdCaracteres = $(this).val().length;
    left = limit-qtdCaracteres;
   
    $('.'+counter).text(left+' restantes');
    if(left<0){
        $('.'+counter).removeClass("positive");
        $('.'+counter).addClass("negative");
    }else{
        $('.'+counter).removeClass("negative");
        $('.'+counter).addClass("positive");
    }

  });
}
limitaCaracteres('text1', 'count1', 10);
});
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
    <title></title>
    <style>
    .negative{
        color: red;
    }
    .positive{
        color: greenyellow;
    }
    </style>
  </head>
  <body style="background-color: #EAEAEA;">
      <input type="text" name="title" class="input100 text1" autocomplete="off" required>     
      <span class="focus-input100" data-placeholder="Title"></span>
      <span class="count1 positive"></span>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
</body>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52527240

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档