Retreat after focus on input with jQuery

0

After the field receives focus on the page load, the label does not appear, so when I receive focus on the input, the page will scroll back down to display the label.

<form role="form" id="formDadosPessoais" onSubmit="return false;">
<div class="col-md-6 lineH">
    <label for="documentoDadosPessoais">CPF/CNPJ:</label>
    <div class="form-group">
        <input autofocus type="text" id="documentoDadosPessoais" name="documentoDadosPessoais" value="<?php echo (isset($cliente_cpfcnpj) ? $cliente_cpfcnpj : ""); ?>" class="form-control" required>
    </div>
</div>
<div class="col-md-6 lineH">
    <label for="documento2DadosPessoais">RG/IE/OAB:</label>
    <div class="form-group">
        <input type="text" id="documento2DadosPessoais" name="documento2DadosPessoais" value="<?php echo (isset($cliente_rgie) ? $cliente_rgie : ""); ?>" class="form-control">
    </div>
</div>
<div class="col-md-12 lineH">
    <label for="nomeDadosPessoais">Nome:</label>
    <div class="form-group">
        <input type="text" id="nomeDadosPessoais" name="nomeDadosPessoais" value="<?php echo (isset($cliente_nome) ? $cliente_nome : ""); ?>" class="form-control" required>
    </div>
</div>
<div class="col-md-6 lineH">
    <label for="cepDadosPessoais">CEP:</label>
    <div class="form-group">
        <input type="text" id="cepDadosPessoais" name="cepDadosPessoais" value="<?php echo (isset($cliente_cep) ? $cliente_cep : ""); ?>" class="form-control" required> <span id="returnCep"></span>
    </div>
</div>
<button id="btnGravarDados" class="btn btn-danger vertical-middle"><i class="fa fa-floppy-o" aria-hidden="true"></i> <strong>GRAVAR REGISTRO</strong></button>
</form>

The script:

<script>
    $(document).ready(function(){

      $("button#btnGravarDados").on('click', function(){

        var documentoDadosPessoais = $("#documentoDadosPessoais").val();
        if(documentoDadosPessoais == "") {
          $('#documentoDadosPessoais').focus();
          window.alert('Preencha o campo em foco');
          return false;
        }

        /* continua validação ...... */

      });

    });
</script>

The input receives the focus, but the label (CPF / CNPJ) is above the window (hidden), it needs to appear the label also when the input receives focus.

Running on: link

    
asked by anonymous 13.12.2017 / 17:00

1 answer

1

So I understand you can use the scroolBy function and move some pixels up, as it is only rising up to the focus of the input:

window.scrollBy(0, -10);

The first parameter moves the horizontal scroll and the second vertical scroll.

Positive values move down and negative values move the scroll up, I think it works for you.

See reference: link

    
13.12.2017 / 17:50