2

Boa tarde Amigos

Possuo uma input com o nome de MARGEM, onde é exibida um valor de acordo com alguns calculos que são feitos... Preciso que a input altere a cor para vermelho se esse valor for menor que 25, se for maior ela mantem a cor dela (branca)...

OBS: Possuo a input Valor, onde essa input as vendedoras manipulam o valor de um produto tentando sempre manter a margem a cima de 25%, porém se ela baixar quero que a cor altere, isso tudo sem refresh.

<label for="valor_unitario">Vlr. Unit.</label>
<input type="text" name="valor_unitario" id="valor_unitario" style="text-align: center" required>

<label for="quantidade">Qtd.</label>
<input type="text" name="quantidade" id="quantidade" style="text-align: center" required>

<label for="valor_total">Vlr. Total</label>
<input type="text" name="valor_total" id="valor_total" readonly>

<label for="margem">Margem</label>
<input type="text" name="margem" id="margem" style="text-align: center" readonly>

Para que não se percam, a input valor total mostra o valor de (valor unitario * quantidade).. o que nos interessa é valor unitario e margem

8
  • Pode postar o código? fica mais fácil de procurar uma solução específica e simples para o seu caso.
    – brnTwp
    Commented 9/05/2018 às 18:26
  • editei a pergunta Commented 9/05/2018 às 18:29
  • Daria para ficar "assistindo" o input com javascript, toda vez que ocorresse alguma alteração, alteraria o background-color do input. document.getElementById('input').addEventListener('input',function(e){ console.log('alterado');}); Commented 9/05/2018 às 18:32
  • porém como eu faria pro caso de alterar somente se o valor for a baixo de 25? Commented 9/05/2018 às 18:33
  • Uma condicional dentro desse eventListener creio que resolveria :) por exemplo: if (input.value > 25){ //logica } else { //logica } Commented 9/05/2018 às 18:39

2 Respostas 2

3

Já que você está utilizando Jquery, pode utilizar o change, ele vai verificar toda vez que ocorreu alguma alteração no input e poderá assim aplicar alguma lógica em cima dessa alteração.

Neste CodePen, fiz apenas no primeiro input, caso precise aplicar em outros, é só seguir a mesma lógica!

5
  • É quase isso amigo, o porém é que assim, conforme eu mudo o valor de "valor_unitario" é que a input margem muda, tem toda uma formula de impostos por trás que quando eu altero o valor da input "valor_unitario" ele calcula e faz uma margem, eu preciso que a input margem mude a cor e nao a valor_unitario, porém quem faz a input margem mudar de valor é a valor_unitario, entendeu? Commented 9/05/2018 às 18:56
  • 1
    Entendi, mas a lógica segue a mesma, você fica observando um input e depois altera o CSS em outro input! Editei agora e pode observar que o background do input margem altera de acordo com o valor do primeiro input. Agora a lógica realmente é preciso ser implementada :) Commented 9/05/2018 às 19:10
  • Perfeito amigo, ajudou muito. Aproveitando tua inteligencia, queria saber se tu sabe fazer isso... enquanto eu vou digitando em um input vai alterando outra automaticamente, seria pra esse mesmo sistema, preciso que enquanto eu vou mudando o valor de "valor_unitario", va atualizando automaticamente o campo margem Commented 9/05/2018 às 19:34
  • 1
    Para isso você vai alterar o valor do input, por exemplo com margem.val() você tem acesso ao valor que está dentro do input e consegue manipular! Fiz outra alteração no CodePen, vê se consegue entender! :D Commented 9/05/2018 às 19:38
  • perfeito irmão, parabéns pela humildade em ajudar! Commented 9/05/2018 às 20:09
0

Utilize jQuery :) você pode utilizar "on change" com uma class para otimização de código. Aí basta adicionar a "class" onde quiser aplicar as cores. Segue um exemplo:

$(document).ready(function(){

  $('.valor').on('change',function(){
    var valor = $(this).val();

    if(valor < 25){
      $(this).addClass("negativo").removeClass("positivo");
    }else{
      $(this).addClass("positivo").removeClass("negativo");
    }
  });
  
});
.negativo {
  background: red;
  color: #fff;
}

.positivo {
  background: green;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="valor_unitario">Vlr. Unit.</label>
<input type="text" name="valor_unitario" id="valor_unitario" class="valor" required>

O código faz é adicionar uma class "positiva" ou "negativa" de acordo com o valor. Você pode criar quantas possibilidade quiser. Positiva, negativa, neutra, etc.

2
  • 1
    Só não pode esquecer de remover a classe, quando alterar o valor do input novamente não ficar a classe lá e acabar dando conflito! :) Commented 9/05/2018 às 19:13
  • Verdade! :) vou editar. Commented 9/05/2018 às 19:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .