Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

AbaClar

Mouse focus

Recommended Posts

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!

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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. 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
<!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;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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/

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!

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Gilberto Jr
      Bom dia.
       
      Eu tenho esse código abaixo que ele deve funcionar da seguinte forma. Ao clicar nesse botão com que tem o ID #inicionovacontagem o sistema tem que voltar a variavel cont para 0, e mudar o focus para o input que tem a ID #codbrra e mostrar uma mensagem no alert. E ele voltando a variavel para zero e mostrando a mensagem. Porem não esta levando o focus para o input#codbrra.
      $("#inicionovacontagem").click(function(){ cont = 0; $("#codbrra").focus(); alert('Voltar Para o Campo Codigo de Barra') });  
      Alguém pode me da uma luz?
       
      Att;
      Gilberto Jr
    • Por Gilberto Jr
      Bom dia.
       
      Eu tenho esse código abaixo que ele deve funcionar da seguinte forma. Ao clicar nesse botão com que tem o ID #inicionovacontagem o sistema tem que voltar a variavel cont para 0, e mudar o focus para o input que tem a ID #codbrra e mostrar uma mensagem no alert. E ele voltando a variavel para zero e mostrando a mensagem. Porem não esta levando o focus para o input#codbrra.
      $("#inicionovacontagem").click(function(){ cont = 0; $("#codbrra").focus(); alert('Voltar Para o Campo Codigo de Barra') });  
      Alguém pode me da uma luz?
       
      Att;
      Gilberto Jr
    • Por andjao
      Por que quando clico ele da o focus onde falta preencher e atualiza a pagina assim esvaziando as variaveis?
      Gostaria que isso não acontecesse e somente desse o focus
       
      Quando ele atualiza a pagina fica com um "?" no final do url e do nome da pagina
       
      <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery.min.js"></script> <script> var alunos = []; $(document).ready(function() { $("#cadastrar").click(function() { cadastrar(); }); $("#exibir").click(function() { exibir(); }); }); function cadastrar() { if ($("#nome").val() == "" || $("#nome").val() < 3) { alert("Preencha corretamente seu nome"); return $("#nome").focus(); } else if ($("#rgm").val() == "" || $("#rgm").val().length < 7) { alert("Preencha corretamente seu RGM"); return $("#rgm").focus(); } else if ($("#parcial").val() == "") { alert("Preencha corretamente sua nota parcial"); return $("#parcial").focus(); } else if ($("#exercicios").val == "") { alert("Preencha corretamente sua nota dos exercícios"); return $("#exercicios").focus(); } else if ($("#projeto").val() == "") { alert("Preencha corretamente sua nota do projeto"); return $("#projeto").focus(); } else if ($("#regimental").val() == "") { alert("Preencha corretamente sua nota regimental"); return $("#regimental").focus(); } else if (($("#nome").val() + $("#rgm").val() + $("#parcial").val() + $("#exercicios").val() + $("#projeto").val() + $("#regimental").val()) > 10) { alert("A soma das notas não podera ultrapassar de 10 pontos"); return false; } else { var aluno = [$("#nome").val(), $("#rgm").val(), $("#parcial").val(), $("#exercicios").val(), $("#projeto").val(), $("#regimental").val()]; alunos.push(aluno); } } function exibir() { alert(alunos[0][3]); var conteudo = "<table border='1'><tr><th>Nome</th><th>RGM</th><th>Parcial</th><th>Exercícios</th><td>Projeto</th><th>Regimental</th></tr>" var i; for (i = 0; i < alunos.length; i++) { conteudo += "<tr><td>" + alunos[i][0] + "</td><td>" + alunos[i][1] + "</td><td>" + alunos[i][2] + "</td><td>" + alunos[i][3] + "</td><td>" + alunos[i][4] + "</td><td>" + alunos[i][4] + "</td></tr>"; } conteudo += "</table>" $("#resultado").html = conteudo; } </script> </head> <body> <form> Nome: <input type="text" id="nome"> <br>RGM: <input type="text" id="rgm"> <br> Nota Parcial: <input type="text" id="parcial"> <br> Nota Exercícios: <input type="text" id="exercicios"> <br> Nota Projeto: <input type="text" id="projeto"> <br> Nota Regimental: <input type="text" id="regimental"> <br><button id="cadastrar">Cadastrar</button> <button id="exibir">Exibir Dados</button> </form> <div id="resultado"></div> </body> </html>
    • Por Eduardo_555
      OLÁ
       
      O problema e o seguinte.
       
      Tenho uma pagina de login com o seguinte código de autenticação da senha(sei que não e muito seguro fazer senha com javascript mas ta bom pra mim)
       
      <script> function Login() { var done=0; var usuario = document.getElementsByName('usuario')[0].value; usuario=usuario.toLowerCase(); var senha= document.getElementsByName('senha')[0].value; seha=senha.toLowerCase(); if (usuario=="ttttt" && senha=="123456") { window.location="inicio.html"; done=1; } if (done==0) { alert("ALGO ESTÁ ERRADO,TENTE NOVAMENTE"); } } </script> Tenho duas caixas de texto, onde digita a senha e o login. e o botao com o segunte codigo. <form="enviar"> <input name="clica" type="button" onclick="Login()" class="botao" value="Login" id="clica"> </form> Atualmente só consigo enviar informações da senha clicando no botão, e gostaria que o usuário pudesse clicar direto no enter e executar o script da senha que coloquei acima. já tentei diversos códigos que achei na net, mas nenhum funcionou no meu caso, devo estar fazendo algo de errado, sou iniciante, tanto em html, quando em javascript... Qualquer ideia para melhorar esta parte do meu código, é valida!!!
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.