1

Preciso fazer um botão assim pro meu site mas não estou conseguindo?

inserir a descrição da imagem aqui

Como fazer isso em html e css e bootstrap? Até tentei fazendo assim, mas não funciona.

<div class="btn-group inline" role="group" aria-label="Basic example">
     <input type="button" class="btn btn-secondary" value="+">
     <input class="form-control" type="number" name="quantidade" onchange="preencheTotalProduto()" min="0" max="<?= $tamanho['estoque'];?>" value="0">
     <input type="button" class="btn btn-secondary" value="-">
</div>
1
  • o seu problema é com o layout, ou é com relação a clicar no + ou no - e mudar o valor do input?
    – hugocsl
    Commented 11/10/2019 às 14:45

2 Respostas 2

0

Cara funciona sim basicamente é só tirar o border-radius do input no meio, para isso use a classe nativa rounded-0. No input vc tb pode colocar as classes btn-default border para ficar mais próximo do seu desenho, eu tb defini um width na mão para ficar com a largura de 4 caracteres, 4ch. Documentação https://getbootstrap.com/docs/4.3/utilities/borders/#border-radius

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="col mt-5">
            <div class="btn-group inline" role="group" aria-label="Basic example">
                <input type="button" class="btn btn-default border" value="+">
                <input style="width: 4ch" class="form-control rounded-0" type="number" name="quantidade" onchange="preencheTotalProduto()" min="0" max="<?= $tamanho['estoque'];?>" value="0">
                <input type="button" class="btn btn-default border" value="-">
            </div>
        </div>
    </div>
</div>

2
  • As duas soluções deram muito certo. Obrigado.
    – Bruno
    Commented 11/10/2019 às 16:52
  • @Bruno demoro Brunão, se vc quer ver um esquema interessante para controlar esses números no input, isso pode te interessar pt.stackoverflow.com/questions/336061/… tem umas coisas bem legais lá
    – hugocsl
    Commented 11/10/2019 às 16:58
0

Voce pode usar o segunte modo, com css e js que controla tudo, e para que nao apareçam os botoes encima e abaixo se usam o input de tipo text

$('.btn-number').click(function(e){
    e.preventDefault();
    
    fieldName = $(this).attr('data-field');
    type      = $(this).attr('data-type');
    var input = $("input[name='"+fieldName+"']");
    var currentVal = parseInt(input.val());
    if (!isNaN(currentVal)) {
        if(type == 'minus') {
            
            if(currentVal > input.attr('min')) {
                input.val(currentVal - 1).change();
            } 
            if(parseInt(input.val()) == input.attr('min')) {
                $(this).attr('disabled', true);
            }

        } else if(type == 'plus') {

            if(currentVal < input.attr('max')) {
                input.val(currentVal + 1).change();
            }
            if(parseInt(input.val()) == input.attr('max')) {
                $(this).attr('disabled', true);
            }

        }
    } else {
        input.val(0);
    }
});
$('.input-number').focusin(function(){
   $(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {
    
    minValue =  parseInt($(this).attr('min'));
    maxValue =  parseInt($(this).attr('max'));
    valueCurrent = parseInt($(this).val());
    
    name = $(this).attr('name');
    if(valueCurrent >= minValue) {
        $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('O numero minimo foi alcançado');
        $(this).val($(this).data('oldValue'));
    }
    if(valueCurrent <= maxValue) {
        $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')
    } else {
        alert('O maximo numero foi alcançado');
        $(this).val($(this).data('oldValue'));
    }
    
    
});
$(".input-number").keydown(function (e) {
        //permite: backspace, delete, tab, escape, enter e .
        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
             // Allow: Ctrl+A
            (e.keyCode == 65 && e.ctrlKey === true) || 
             // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
                 // let it happen, don't do anything
                 return;
        }
        //verifica que seja um numero 
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
    });
    
    .center{
      width: 150px;
        margin: 40px auto;

      }
<html>
  <head>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

  
  </head>
  <body>
     <div class="center">
      <div class="input-group">
          <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quantidade">
                  <span class="glyphicon glyphicon-minus"></span>
              </button>
          </span>
          <input type="text" name="quantidade" class="form-control input-number" value="1" min="1" max="10">
          <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quantidade">
                  <span class="glyphicon glyphicon-plus"></span>
              </button>
          </span>
      </div>
     </div>
  </body>
</html>

Substitui o input do meu codigo com o seu :

 <input type="text" class="form-control input-number" name="quantidade" onchange="preencheTotalProduto()" min="0" max="<?= $tamanho['estoque'];?>" value="0">

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 .