Indentation after Focus in input with jQuery

Asked

Viewed 350 times

0

After the field receives focus on page loading, the label is not displayed, need that when receiving focus on the input, that the page moves a little downward, 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), I need the label to appear also when the input receives focus.

Functioning in: https://jsfiddle.net/svh46cq2/

  • Could you elaborate further on that retreat? So the community can help you more easily.

  • I updated the code, but the form has almost 80 inputs, why when validating and the field is not filled, it receives focus, and the label is hidden, because the top of the browser (window) cover, because the input received focus but the label is up.

  • And the problem where is it? apparently Focus already does what you want to do. See in my example I did https://jsfiddle.net/5vfrqdan/

  • Paulo Roberto - It receives focus, but the label does not display, because the focus is on the input, and the label above, but the label disappears because the top of the window is paired in the input with focus.

  • See https://jsfiddle.net/svh46cq2/ &#Xa.

1 answer

2


From what I understand you can use the scroolBy function and move a few pixels above, as it is only going up to the input focus:

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 suits you.

Follows reference: https://www.w3schools.com/jsref/met_win_scrollby.asp

  • It worked perfectly according to my need, grateful!

  • 1

    Quiet, for nothing ;)

Browser other questions tagged

You are not signed in. Login or sign up in order to post.