Publicado em 15 de fev.

Mouse focus

Estou a "tentar" criar uma base de dados em php. Neste momento estou a tratar dos Formulários c/ abas. Como "curioso" acho q a "coisa" não está mal de todo, mas deparo-me com uma situação, o formulário tem (creio) 17 "input text" e 4 "select option"(?)! A partir do 12 "input" as cxas de texto não recebem o foco do mouse. Isto deve-se a quê? Obrigado!

Discussão (13)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

dougtop· 15 de fev.

Verifique se todos os campos estão dentro da tag <form></form>.

	 

	Obs.: Se você está fazendo submit para cada aba, então será necessário uma tag <form></form> em cada aba.

	 

	Verificado isso e não resolvido, você pode forçar o atributo html tabindex. Ele serve para setar a ordem diretamente na tag:

	 

<input type="text" name="lastname" tabindex="2"> <!-- na passada do tab será o segundo elemento -->
<input type="text" name="lastname" tabindex="1"> <!-- na passada do tab será o primeiro elemento -->
<input type="text" name="lastname" tabindex="3"> <!-- na passada do tab será o terceiro elemento -->

	Nesse link tem mais detalhes sobre o tabindex: [https://www.w3schools.com/tags/att_global_tabindex.asp](https://www.w3schools.com/tags/att_global_tabindex.asp)

	 

	O lado ruim é que terá que dar manutenção para essa ordem sempre que um campo novo entrar ou sair :/

	 

	Para setar o primeiro campo assim que entra na página, use o atributo autofocus:

<input type="text" name="fname" autofocus>

	Espero ter ajudado! Abraços

AbaClar· 15 de fev.

Não, todos os imputs estão dentro das tags <form> </form>. Se usar a tecla "tab" o foco segue naturalmente todos os inputs. Se com o mouse quiser dar foco a partir do 10º input, não recebem o foco.

dougtop· 15 de fev.

Você tem esse site no ar ou tem como coloca-lo no https://jsfiddle.net/ para darmos uma olhada?

dougtop· 15 de fev.

3 horas atrás, AbaClar disse:

não recebem o foco do mouse

A partir do 12º input você não consegue mais clicar com o mouse na caixa de texto para ela ficar com o cursor piscando? É isso?

Se for é até mais estranho do que parece, talvez tenha alguma div por cima, algo impedindo o clique...teria que ver com a ferramenta de inspeção do navegador.

AbaClar· 15 de fev.

sim é isso!

AbaClar· 15 de fev.

Mais logo vou tentar colocar no site. Obrigado

AbaClar· 15 de fev.

<!DOCTYPE html>

<html lang="pt-pt">
<head>
	<meta charset=utf-8>
	<link rel="stylesheet" type="text/css" href="css/cxaCliente.css">
	<link rel="stylesheet" type="text/css" href="css/frmRegisto.css">
	<link rel="stylesheet" type="text/css" href="css/cxaBusca.css">
	<script src="js/codigo.js"></script>
	<script src="js/untitled.js"></script>
	<title></title>
</head>
<body>
	<h1 align="center"> CLIENTES </h1>

	<div id="cxaCliente">
 <header id="header">
 <a class="Etiquetas E_Active" href="#" onclick="mostraPainel(0);">Home</a>
 <a class="Etiquetas" href="#" onclick="mostraPainel(1);">Registo</a>
 <a class="Etiquetas" href="#" onclick="mostraPainel(2);">Processo</a>
 <a class="Etiquetas" href="#" onclick="mostraPainel(3);">Agregado</a>
 <a class="Etiquetas" href="#" onclick="mostraPainel(4);">Contagem</a>
 <a class="Etiquetas" href="#" onclick="mostraPainel(5);">Busca</a>

 </header>
	<div class="Painel P_Active">
 <img src="imagens/images" alt="" width="974" height="500">
 </div>
 <div class="Painel">
 <p><h3 align="center"> REGISTO DE CLIENTES </h3></p>
 <form action="" method="post" accept-charset="utf-8" id="frmRegisto">
 <label>Nome: <input type="text" name="" value="" size="41"></label>
 <label>Nascido a: <input type="text" name="" value="" placeholder="aaaa-mm-dd" size="9"></label>
 <label>E. Civil: <select name="" id="">
 <option value="-- Seleccione --">- Seleccione -</option>}
 <option value="Casado">Casado</option>
 <option value="Divorciado">Divorciado</option>
 <option value="Solteiro">Solteiro</option>
 <option value="U. Facto">UFacto</option>
 <option value="Viúvo">Viúvo</option>
 </select></label>
 <label>Profissão: <input type="text" name="" value=""></label> <br><br>
 <label>Situação: <select name="" id="">
 <option value="-- Seleccione --">- Seleccione -</option>}
 <option value="Activo">Activo</option>
 <option value="Aposentado">Aposentado</option>
 </select></label>
 <label>Filho de: <input type="text" name="" value="" size="31"></label>
 <label>e de: <input type="text" name="" value="" size="31"></label>
 <label>Distrito: <select name="" id="optDistrito">
 <option value="-- Seleccione --">- Seleccione -</option>}
 <option value="Aveiro">Aveiro</option>
 <option value="Beja">Beja</option>
 <option value="Coimbra">Coimbra</option>
 <option value="Leiria">Leiria</option>
 <option value="Lisboa">Lisboa</option>
 </select></label> <br><br>
 <label>Concelho: <input type="text" name="" value=""></label>
 <label>Freguesia: <input type="text" name="" value=""></label>
 <label>Morada: <input type="text" name="" value="" size="49"></label> <br><br>
 <label>Lugar: <input type="text" name="" value=""></label>
 <label>C Postal:<input type="text" name="" value="" size="22"></label>
 <label>CCidadão: <input type="text" name="" value="" size="14"></label>
 <label>NIF: <input type="text" name="" value="" size="9"></label>
 <label>SSocial: <input type="text" name="" value="" size="11"></label> <br><br>
 <label>Entid Ext: <select name="" id="optEntidade">
 <option value="-- Seleccione --">- Seleccione -</option>}
 <option value="Caisse Française">Caisse Française</option>
 <option value="Caisse Française">Caisse Française</option>
 <option value="Caisse Française">Caisse Française</option>
 <option value="Caisse Française">Caisse Française</option>
 <option value="Caisse Française">Caisse Française</option>
 </select></label>
 <label>Ent Externa: <input type="text" name="" value="" placeholder="Número"></label>
 <label>Telefone: <input type="text" name="" value=""></label>
 <label>Email: <input type="text" name="" value="" size="25"></label> <br><br>
 <label>Obs: <input type="text" name="" value="" id="txtObs"></label> <br><br>
 <button type="submit" id="btnAdiciona">ADICIONA</button>
 </form>
 </div>
 <div class="Painel">
 <p>Painel3</p>
 </div>

 <div class="Painel">
 <p>Painel4</p>
 </div>
 <div class="Painel">
 <p>Painel5</p>
 </div>
 <div class="Painel">
 <h3 align="center">LOCALIZAR CLIENTES</h3>
 <form action="" method="post" accept-charset="utf-8" id="frmBSC">
 <label id="lblLocalizar">Localizar: <input type="text" name="" value="" id="txtBusca"></label>
 <button type="submit" id="btnLocalizar">Localizar</button>
 </form>

 <a class="bscEtiqueta Et_Active" href="#" onclick="mostrarPainel(0);">CLIENTE</a>
 <div class="bscPainel Pan_Active">
 <p>Dados do Cliente</p>
 </div>
 <a class="bscEtiqueta" href="#" onclick="mostrarPainel(1);">AGREGADO</a>
 <div class="bscPainel">
 <p>Dados do Agregado familiar do Cliente</p>
 </div>
 <a class="bscEtiqueta" href="#" onclick="mostrarPainel(2);">PROCESSOS</a>
 <div class="bscPainel">
 <p>Processos do Cliente</p>
 </div>
 <a class="bscEtiqueta" href="#" onclick="mostrarPainel(3);">CONTAGEM TEMPO</a>
 <div class="bscPainel">
 <p>Contagem do tempo do Cliente para efeitos de reforma</p>
 </div>
 </div>
	</div>
</body>
</html>

Formulário/

body {

background-color: #3399FF;
}

#cxaCliente {
	width: 80%;
	height: 500px;
	background-color: #FFFF99;
	border:solid 1px;
	margin: auto;

}
#header {
	width: 10%;
	height: 500px;
	background-color: #808080;

}
.Etiquetas {
	text-decoration: none;
	padding: 10px;
	border: solid 1px;
	display: inline-flex;
	width: 70px;
	margin-left: 8px;
	margin-top: 3px;
	border-radius: 5px;
}

.Painel {
	position: absolute;
	width: 974px;
	height: 500px;
	margin-top: -500px;
	margin-left: 106px;
	visibility: hidden;
	opacity: 0;
}

.P_Active {
	visibility: visible;
	opacity: 1;
}

/*Formulário Busca

.bscEtiqueta {
display: inline-block;
text-decoration: none;
padding: 10px;
border: 1px solid;
position: relative;
margin-top: 23px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: translateY(1px);
z-index: 2;
}

.bscPainel {
position: absolute;
border: solid 1px;
height: 328px;
visibility: hidden;
opacity: 0;
width: 973px;
}

.Et_Active {
border-bottom-color: #FFFF99;
}

.Pan_Active {
visibility: visible;
opacity: 1;
}
#frmBSC {
width: 550px;
height: 50px;
background-color: #888;
margin-top: 14px;
margin-left: 200px;

}
#txtBusca {
margin-top: 10px;
}

#btnLocalizar {
width: 130px;
height: 22px;
}
#lblLocalizar {
margin-left: 80px;
}

*/ Formulário Registo

#frmRegisto {
padding: 10px;
}
#optDistrito {
width: 105px;
}
#btnAdiciona {
padding: 10px 100px;
margin-left: 25px;
}
#txtObs {
width: 916px;
}

AbaClar· 15 de fev.

Creio ter encontrado a origem do problema, não sei é onde está e como resolver mas ... se inibir no estilo.css a parte relativa ao formulário de busca tudo fica a funcionar

/*.Et_Active {

	border-bottom-color: #FFFF99;

	}

	.Pan_Active {

	visibility: visible;

	opacity: 1;

	}*/

	Inibindo este sector o Formulário de Registo funciona ... Estas linhas fazem parte do Formulário de Busca e são "manipuladas" com código javascript

dougtop· 16 de fev.

Não sei se foi na hora de colar o código, mas percebi que sua declaração de comentários está gerando um erro. Eu corrigi isso e voltei com os CSSs referentes à busca.

E o que eu acho que irá de fato corrigir o seu problema é trocar as propriedades:

visibility: hidden;
opacity: 0;

	por:

display: none;

	E onde está:

visibility: visible;
opacity: 1;

	trocar por:

display: block;

	Fiz as alterações citadas acima em [https://jsfiddle.net/dougtop/6u6z5t7a/22/](https://jsfiddle.net/dougtop/6u6z5t7a/22/)

	Mas não consegui testar porque não tenho acesso aos seus arquivos js. Testa com essas alterações que eu fiz e me fale se funcionou por favor.

	 

	Abraços!

dougtop· 16 de fev.

Cara eu dei uma olhada aqui e funcionou trocando os css que nem eu indiquei no post acima. Troca as suas classes panel e p_active para ficarem assim:

 .Painel {
 position: absolute;
 width: 974px;
 height: 500px;
 margin-top: -500px;
 margin-left: 106px;
 display: none;
 }

 .P_Active {
 display: block;
 }

	 

	Dessa forma funcionou para mim. Porque o erro era uma div que estava por cima, quando eu trabalho com display none e block, isso não acontece.

AbaClar· 16 de fev.

Ok, tb funcionou para mim.

Outro assunto que me está a "assombrar" é ao usar a aba Busca, ao clicar o button localizar, volto para a aba Home, como faço para o manter e na aba Busca?

Obrigado

dougtop· 16 de fev.

Existem algumas formas de fazer isso, a que eu indico é você cancelar o evento submit do formulário via javascript e trabalhar com Ajax para submeter o formulário, dessa forma, sua página não dará refresh e você não perderá a aba que estiver no momento. Em compensação, terá que limpar os campos (caso seu projeto contemple isso) via javascript também.

Sugiro que importe a biblioteca jQuery para facilitar sua vida. Nesse link explica como fazer o submit via Ajax: http://wbruno.com.br/ajax/enviar-formulario-para-php-sem-refresh-jquery-ajax/

Abraços!

AbaClar· 19 de fev.

Ok, obrigado, vou então tentar alargar os meus conhecimentos.