JS onKeyup计数器-如何在他变成负数时改变计数器的颜色？
JS onKeyup计数器-如何在他变成负数时改变计数器的颜色？
提问于 2018-09-27 07:15:14
$(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);
});<!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>
我想改变计数器的颜色，最初的颜色应该是绿色，当计数器变成负数时，颜色应该是红色。
示例：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-27 07:28:47
您可以按如下方式使用：
$(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);
});<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52527240
复制相关文章
相似问题
腾讯云开发者
