Tenho um código que ao clicar em um botão de edição esconde um formulario (preenchido) e aparece outro formulário (para edição). Este código também dá foco no input em que foi clicado para editar.
Eu gostaria de dar um scroll na página para que fique visível na tela do usuáiro o campo que está com foco, pois no futuro este formulário será bem grande. Segue o exemplo deste link aqui, mas não funcionou no meu caso.
No meu código abaixo eu coloquei quebra de linha <br>
só para simbolizar o espaçamento. Eu gostaria que ao clicar no link de editar rolasse a página até a div com id info1-editar
.
$( document ).ready(function() {
$("#editarDados").hide();
})
function darfocus(el){
var id = '';
var $doc = $('html, body');
id = (el.id);
id = id.replace("focus-", "");
$("#editarDados").show("slow");
$("#valoresDados").hide("slow");
$('#' + id).focus();
$doc.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div class="row" id="valoresDados">
<div class="col-12 col-sm-12 col-md-12 mt-2 mb-2">
<a href="#info1-editar" onclick="darfocus(this)" id="focus-senha" class="editar-dados"><i class="fas fa-pen-square"></i></a>
<strong> Senha:</strong> *******</div>
<div class="col-12 col-sm-12 col-md-3 float-left mt-2 mb-2">
<a href="#info1-editar" onclick="darfocus(this)" id="focus-telefone" class="editar-dados"><i class="fas fa-pen-square"></i></a>
<strong> Telefone:</strong> (62) 3232-0000
</div>
<div class="col-12 col-sm-12 col-md-4 float-left mt-2 mb-2">
<a href="#info1-editar" onclick="darfocus(this)" id="focus-telefone2" class="editar-dados"><i class="fas fa-pen-square"></i></a>
<strong> Celular:</strong> (62) 98199-3558
</div>
<div class="col-12 col-sm-12 col-md-5 float-left mt-2 mb-2">
<a href="#info1-editar" onclick="darfocus(this)" id="focus-cep" class="editar-dados"><i class="fas fa-pen-square"></i></a>
<strong> Cep:</strong> 00000-000
</div>
</div>
<div class="row" id="editarDados">
<div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>
<div class="col-12 col-sm-12 col-md-12 float-left">Teste</div>
<div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>
<div class="col-12 col-sm-12 col-md-12 float-left">Teste2</div>
<div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>
<div id="info1-editar"></div>
<div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
<label class="t55" for="senha"><strong>Senha* </strong></label>
<input type="password" class="t55" name="senha" id="senha" required value="*******">
</div>
<div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
<label class="t85" for="telefone"><strong>Telefone*: </strong></label>
<input type="text" class="t85" name="telefone" id="telefone" required value="(62) 0000-0000">
</div>
<div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
<label class="t85" for="telefone2"><strong>Celular: </strong></label>
<input type="text" class="t85" name="telefone2" id="telefone2" required value="(62) 90000-0000">
</div>
<div class="col-12 col-sm-12 col-md-12 float-left mt-2 mb-2">
<label class="t55" for="cep"><strong>Cep*: </strong></label>
<input type="text" class="t55" name="cep" id="cep" required value="00000-000">
</div>
<div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>
<div class="col-12 col-sm-12 col-md-12 float-left">Teste</div>
<div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>
<div class="col-12 col-sm-12 col-md-12 float-left">Teste2</div>
<div class="col-12 col-sm-12 col-md-12 float-left" style="height:400px"></div>
</div>
<br>
foi colocado só para simbolizar um espaço na tela onde conterão diversasdiv
e informações, eles não serão usados no meu código real.div
no local onde coloquei<br>
. Consequentemente ela terá scroll, e suponha que ela não tenha scroll, então o input em que a função dá foco ficará visível na tela da pessoa, consequentemente não será preciso o scroll. Esse comportamento é necessário para que quando a página tenha scroll o inpút em foco fique visível, pois o foco do input é dado automaticamente ao clicar no botão de editar e não pelo clique do mouse dentro do input.