Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Form em mobile

Oi Pessoal,

Estou com problema em minha pagina de login no Safari do Iphone. Essa pagina contem um header (com menu), o form e um footer. Porem quando toco em qualquer parte da tela, ate mesmo nos links do menu, o Safari da foco no form.

Alguém sabe por que acontece isso?

Obrigada

5 respostas
solução!

Oi Patrícia, vc pode postar seu HTML e CSS aqui pra eu dar uma olhada? (:

Oi Yuri,

segue o html

<div class="cover" back-img ng-controller="homeController">
    <div class="loginCadastro">
        <div class="container-fluid" ng-controller="loginController">
            <div class="row">
                <div class="logoMenu">
                    <a ng-click="forgot = false" title="" class="logo"><img src="img/logos/logo_cpm_header.png" alt=""></a>
                    <div class="menuHome">
                        <a ui-sref="saiba_mais_guia" title="" class="dicas"><img src="img/global/menu_dicas.png" alt=""></a>
                        <a ui-sref="saiba_mais" title="" class="saibamais"><img src="img/global/menu_saiba_mais.png" alt=""></a>
                        <a ui-sref="callups" title="" class="enviarHistorias"><img src="img/global/menu_envie_historias.png" alt=""></a>
                    </div>
                </div>

                <div id="status"></div>

                <div id="formLogin">
                    <fieldset class="login">
                        <input type="text" autocomplete="off" name="userName"  placeholder="{{'email_cpf_cnpj' | translate}}" value="" ng-model="userName" ng-hide="forgot" ng-keypress="entrarKeyPress($event)" autofocus>
                        <input type="password" autocomplete="off" name="senha" placeholder="{{'senha' | translate}}" ng-model="senha" value="" ng-hide="forgot" ng-keypress="entrarKeyPress($event)">
                        <div class="btnsLogin" ng-hide="forgot">
                            <button type="submit" ng-click="loginComUsername()" >{{'entrar' | translate}}</button>
                            <span ng-hide="forgot">{{'ou_form_login' | translate}}</span>
                            <div class="loginFacebook">
                                <button ng-disabled="!facebookReady" ng-click="IntentLogin('login')" ng-controller="facebookController">{{'login_in' | translate}}</button>
                            </div>
                        </div>
                        <div class="boxForgot" ng-hide="forgot">
                            <p>
                                <input type="checkbox" name="manterConectado" ng-model="manterConectado" ng-click="setManterConectado()" id="manterConectado" ng-true-value="true">
                                <label for="manterConectado">{{'manter_conectado' | translate}}</label>
                            </p>
                            <div class="linkRegister" ui-sref="finishRegisterMobile">{{'cadastrar_se' | translate}}</div>
                            <a class="esqueceSenha" ng-click="forgot = true">{{'esqueci_senha' | translate}}</a>
                        </div>

                        <input type="text" autocomplete="off" name="email" placeholder="{{'informe_email' | translate}}" ng-model="email" ng-show="forgot" class="campoForgot">
                        <div class="btnsLogin">
                            <button ng-click="newPassword()" ng-show="forgot" class="btnForgot" ng-disabled="!email">{{'enviar' | translate}}</button>
                        </div>
                    </fieldset>
                </div>
            </div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="boxCadastro" ng-controller="cadastroController">        
                    <div id="not_senha" ng-show="open_not_senha">
                        <p>{{'notificacao_senha' | translate}}</p>
                    </div>
                    <div id="not_cookie" ng-show="open_not_marco">
                        <p>{{'mensagem_cookie_marco_civil_home' | translate}}</p>
                    </div>
                    <div id="formRegister">
                        <fieldset>
                            <div class="title">
                                <h2>{{'cadastrar_se' | translate}}</h2>
                            </div>
                            <input type="text" autocomplete="off" name="email" placeholder="{{'email' | translate}}" ng-model="email" ng-keypress="cadastrarKeyPress($event)">
                            <input type="text" autocomplete="off" name="confirmeEmail" placeholder="{{'confirmar_email' | translate}}" ng-model="confirmeEmail" ng-keypress="cadastrarKeyPress($event)" onpaste="return false;">
                            <input type="password" autocomplete="off" name="senha" placeholder="{{'senha' | translate}}" ng-model="senha" ng-keypress="cadastrarKeyPress($event)" ng-focus="open_not_senha = true" ng-blur="open_not_senha = false">
                            <input type="password" autocomplete="off" name="confirmeSenha" placeholder="{{'confirmar_senha' | translate}}" ng-model="confirmeSenha" ng-keypress="cadastrarKeyPress($event)" onpaste="return false;">
                            <p class="checkboxCadastro">
                                <input type="checkbox" name="termosDeUso" ng-model="termosDeUso" id="termosDeUso" ng-click="setTermosDeUso()" ng-keypress="cadastrarKeyPress($event)">
                                <label for="termosDeUso" ng-bind-html="'aceito_termos_e_politica' | translate"></label>
                            </p>
                            <p class="checkboxCadastro">
                                <input type="checkbox" name="marcoCivil" ng-model="marcoCivil" id="marcoCivil" ng-click="setMarcoCivil()" ng-keypress="cadastrarKeyPress($event)">
                                <label ng-bind-html="'aceito_marco_civil' | translate" ng-click="open_not_marco = !open_not_marco"></label>
                            </p>
                            <button ng-click="register()">{{'cadastrar' | translate}}</button>
                            <span>{{'ou_form_login' | translate}}</span>
                            <button class="registerFacebook" data-ng-disabled="!facebookReady" data-ng-click="IntentLogin('cadastro')" ng-controller="facebookController">{{'cadastrar_facebook' | translate}}</button>
                        </fieldset>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</div>

Não estou conseguindo colar o código

Eu chutaria que tem algum elemento do form ficando por cima de alguma forma, o que dispara o focus no iOS.

Mas precisava testar e debugar certinho no aparelho pra entender. Tem alguma URL publica que a gente consiga acessar a sua pagina pra testar? Ou rolaria subir um demo com a pagina que dá bug no codepen ou algo assim?

Tem uma url publica sim.

Pode acessar: http://teste.contapramim.com.br

Obrigada

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software