[Resolvido] Mudar estilo dos campos ao dar o foco.

Henrique Barcelos · Janeiro 6, 2009

Boa Noite galera...

Mais uma vez estou eu aqui pedindo socorro a vocês http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif ... Juro que um dia aprendo JavaScript direito, mas está dificil... pedi um curso aqui do iMasters mesmo (Javascript Starter), mas me mandaram um DVD riscado (justamente na aula que trata dos eventos onblur, onfocus, etc e em mais outras 2)...

É o seguinte...

Eu quero mudar a cor das bordas dos inputs e selects de um formulário quando recebem o foco, fazendo do jeito "facil" eu consigo: vai no input e digita os eventos onfocus e onblur, cada um com a sua função... Só que essa maneira me parace intrusiva e "suja" demais, então comecei a pensar numa maneira de fazer isso automaticamente, a lógica acho que está certa, o problema é a sintaxe.

function mudarBorda(campo){
	 var campos = document.getElementsByTagName("input");
	
	 for(var i = 0; i < campos.length; i++){
		   if(campos[i].getAttribute("type") == "text"){ //verifico se é do tipo texto
				 campos[i].onfocus = function { //essa parte está errada, mas não sei como fazer
					 campos[i].style.borderColor = "#006699";
				 }
		   }
	 }
}

Agradeço a ajuda desde já. :rolleyes:

Henrique Barcelos · Janeiro 6, 2009

Só aproveitando o tópico...

Estou há 2 horas procurando uma apostila decente de DOM no google e não acho...

Se alguem puder me indicar alguma eu agradeceria...

Vlw...

klonder · Janeiro 7, 2009

Mano, fiz uma maneira aqui até interessante.

Copie o código abaixo e cole no seu editor HTML preferido:

<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function campoTexto(e,f) {
	if(f==1){
		e.style.borderTop = '#0080FF 1px solid';
		e.style.borderLeft = '#0080FF 1px solid';
		e.style.borderRight = '#000080 1px solid';
		e.style.borderBottom = '#000080 1px solid';
		e.style.backgroundColor = '#FFFFFF';
	}else{
		e.style.borderTop = '#000000 1px solid';
		e.style.borderLeft = '#000000 1px solid';
		e.style.borderRight = '#000000 1px solid';
		e.style.borderBottom = '#000000 1px solid';
		e.style.backgroundColor = '#EFEFEF';
	}
}
</script>

<form name="form1" action="" method="post">
<input type="text" name="texto1" value="" onFocus="campoTexto(this,1)" onBlur="campoTexto(this,0)">
<br>
<input type="text" name="texto2" value="" onFocus="campoTexto(this,1)" onBlur="campoTexto(this,0)">

</form>
</body>
</html>

É uma maneira que funciona beleza. Lembre-se apenas se setar um "value" padrão no início do código. Eu recomendo não diferir muito os valores padrões daqueles que ficarão na função em JavaScript não (no bloco "else"). Mas aí, dependerá do seu projeto.

Obs: Eu não criei o CSS inicial e as input com o "class" já definido pois isso irá variar de caso para caso.

Abraços e boa sorte!

DSerma · Janeiro 7, 2009

function mudarBorda()
{
	 var campos = document.getElementsByTagName("input");
	var id = "";
	 for(i = 0; i < campos.length; i++){
		id = campos[i].getAttribute('id');  
	   campos[i].setAttribute("onfocus", "Muda('"+ id + "')");
			id = "";	 
		   }
	
}

function Muda(id)
{
	document.getElementById(id).style.borderColor = "#006699";
}

Abraços...

Henrique Barcelos · Janeiro 7, 2009

*Usei o DOCTYPE transitional ao inves do strict para poder usar o TARGET(no strict o target nunca teve TARGET)

*Usei CSS para estilizar o formulario.

*Ele é semanticamente correto.

*troquei dois inputs por selects com valores "possiveis", o de "FRETE" que só tem duas opções (EN e SD) e o de estado, o qual eu listei todos(se tiver faltando ou alguma letra errada me avisem).

*Usei maxlength e segui os numeros de limite que na pagina https://pagseguro.uol.com.br/carrinhoprorio.aspx mostrava

*Defini como XHTML e defini a linguagem PT-BR, porem isso não inpede de usar HTML ao inves de XHTML, basta tirar dos inputs isso:

/>

*Usei javascript para deixar os campos que só poderiam ir numeros mais corretos, por que tem uns usuarios que fazem

*coisa errada e não conseguem ver o erro(eu trabalho em lan house vejo muito kkk)

*Não fiz outros tipos de validação pois acredito que outros são facil de fazer (PESQUISEM no forum de javascript tem varios prontos)

*Então temos ae agora uma página bem mais segura que o normal, e valida pelo W3C.

*Formulario testado no IE4.0, IE5.01, IE5.5, IE6, FF2, FF3, Opera9, Safari, Google Chrome

(Eu testar no IE4.0, IE5.01 e no IE5.5 não siginifica que o site uol funcione perfeitamente nesses navegadores, o que eu testei foi a aparencia do formulario e o javascript)

(Nos IE4.0, IE5.01 e no IE5.5 os labels ficaram sem as "margens" mas ainda sim estão alinhados)

Acaso queira usar STRICT na pagina do formulario faça isso:

<form action="https://pagseguro.uol.com.br/security/webpagamentos/webpagto.aspx" method="post" onsubmit="return this.target='PagSeguro'">

Tem outras adaptações, pesquisem no forum.

O ruim é que ficará dependente do JAVASCRIPT.

Qualquer erro de envio do formulario ao PAGESEGURO ou outro BUG informe neste tópico.

código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>Carrinho proprio Pageseguro - valido pelo w3c</title>
<style type="text/css">
#formps{
font-family: Verdana;
font-size:10pt;
background:#fc0;/*cor opcional, somente para visão da area do formulario, altere ou retire conforme necessidade*/
width:400px;
}
div#formps form{
margin:0;
padding:0;
}
div#formps fieldset{
border:0;
}
div#formps label{
display:block;
padding:1px;
}
div#formps span{
font-weight:bold;
float:left;
width:120px;
height:20px;
margin:2px;
}
div#formps input, div#formps select{
border:1px #000 solid;
width:195px;
height:20px;
margin:2px;
}
div#formps label.s{
display:inline;
}
div#formps label.s input{
border:none;
background:none;
width:auto;
height:auto;
}
</style>

<script type="text/javascript">
function SomenteNumero(e){
	var tecla=(window.event)?event.keyCode:e.which;
	if((tecla > 47 && tecla < 58) || tecla == "0" || tecla == "9") return true;
	else{
	if (tecla != 8) return false;
	else return true;
	}
}
</script>
</head>

<body>
<div id="formps">
<form target="PagSeguro" action="https://pagseguro.uol.com.br/security/webpagamentos/webpagto.aspx" method="post">

<fieldset>
<label>
<input type="hidden" name="item_id_1" value="25" />
<input type="hidden" name="item_descr_1" value="exemplo de produto 1" />
<input type="hidden" name="item_quant_1" value="3" />
<input type="hidden" name="item_valor_1" value="60.00" />
<input type="hidden" name="item_frete_1" value="0" />
<input type="hidden" name="item_peso_1" value="1000" />
<input type="hidden" name="item_id_2" value="26" />
<input type="hidden" name="item_descr_2" value="exemplo de produto 2" />
<input type="hidden" name="item_quant_2" value="2" />
<input type="hidden" name="item_valor_2" value="10.00" />
<input type="hidden" name="item_frete_2" value="0" />
<input type="hidden" name="item_peso_2" value="100" />
</label>

<label>

<span>Tipo de frete:</span>
<select name="tipo_frete">
<option value="EN">PAC</option>
<option value="SD">SEDEX</option>
</select>
</label>

<label>
<span>Nome:</span>
<input type="text" name="cliente_nome" value="" maxlength="100" />
</label>

<label>

<span>CEP:</span>
<input type="text" name="cliente_cep" value="" maxlength="8" onkeypress="return SomenteNumero(event)" />
</label>

<label>
<span>Endereço:</span>
<input type="text" name="cliente_end" value="" maxlength="200" />
</label>

<label>
<span>numero:</span>

<input type="text" name="cliente_num" value="" maxlength="10" onkeypress="return SomenteNumero(event)" />
</label>

<label>
<span>Complemento:</span>
<input type="text" name="cliente_compl" value="" maxlength="100" />
</label>

<label>
<span>Bairro:</span>
<input type="text" name="cliente_bairro" value="" maxlength="100" />
</label>

<label>
<span>Cidade:</span>

<input type="text" name="cliente_cidade" value="" maxlength="100" />
</label>

<label>
<span>Estado</span>
<select name="cliente_uf">
<option value="AC">AC - Acre</option>
<option value="AL">AL - Alagoas</option>
<option value="AM">AM - Amazonas</option>
<option value="AP">AP - Amapá</option>
<option value="BA">BA - Bahia</option>

<option value="CE">CE - Ceará</option>
<option value="DF">DF - Distrito Federal</option>
<option value="ES">ES - Espírito Santo</option>
<option value="GO">GO - Goias</option>
<option value="MA">MA - Maranhão</option>
<option value="MG">MG - Minas Gerais</option>
<option value="MS">MS - Mato Grosso do Sul</option>
<option value="MT">MT - Mato Grosso</option>
<option value="PA">PA - Pará</option>

<option value="PB">PB - Paraiba</option>
<option value="PE">PE - Pernambuco</option>
<option value="PI">PI - Piaui</option>
<option value="PR">PR - Paraná</option>
<option value="RJ">RJ - Rio de Janeiro</option>
<option value="RN">RN - Rio Grande do Norte</option>
<option value="RO">RO - Rondônia</option>
<option value="RR">RR - Roraima</option>
<option value="RS">RS - Rio Grande do Sul</option>

<option value="SC">SC - Santa Catarina</option>
<option value="SE">SE - Sergipe</option>
<option value="SP">SP - São Paulo</option>
<option value="TO">TO - Tocantins</option>
</select>

<input type="hidden" name="cliente_pais" value="BRA" />
</label>

<label>
<span>DDD:</span>
<input type="text" name="cliente_ddd" value="" maxlength="2" onkeypress="return SomenteNumero(event)" />

</label>

<label>
<span>Telefone:</span>
<input type="text" name="cliente_tel" value="" maxlength="8" onkeypress="return SomenteNumero(event)" />
</label>

<label>
<span>Email:</span>
<input type="text" name="cliente_email" value="" maxlength="200" />
</label>

<label class="s">
<input type="image" src="https://pagseguro.uol.com.br/Security/Imagens/btnfinalizaBR.jpg" name="submit" alt="Pague com PagSeguro - é rápido, grátis e seguro!" />
</label>

</fieldset>

</form>
</div>
</body>
</html>

klonder · Janeiro 7, 2009

O que você gostaria de fazer na verdade? Eu entendi que, ao se referir ao código como "sujo" estava se referindo à poluição visual do código-fonte. Não compreendi muito bem o que você denomina de "intrusivo" rsrs!

Se o "sujo" for realmente isso, basta você criar o script em um arquivo separado (o famoso .js) e incluí-lo no arquivo no qual as funções serão executadas (com o famoso <script src="">, hehe!

Creio não ter como fazer melhor do que isso... na verdade eu não entendi muito bem a sua dúvida... foi malz ter "chovido no molhado" ae, hehe! http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

Bruno_Ferreira · Janeiro 7, 2009

Cara, temos duas maneiras uma ótima e outra mais ou menos.

mais ou menos: Suponho que você deva ter uma folha de estilos em um arquivo separado, se não tiver, eu recomendo, pois limpa bastante o seu código html pois não precisa do <script></script> e você não vai colocar atributos de estilo diretamente nas tags.

O CSS tem algumas metaalgumas coisas (não me lembro o nome) que é aplicado em alguns eventos, como receber foco por exemplo:

input.texto{border-color: #000000;}

//quando recebe foco:
input.texto:focus{border-color: #006699;}

A má notícia é que não fufa em todos os browsers (firefox sei que funciona muito bem).

Ótima: faz os arquivos de folha de estilos e de script separados limpando uma boa parte do código, e coloca os eventos (tipo Onfocus) nas tags html.

Não sei se resolveu muito não mas espero que ajude.

Bruno_Ferreira · Janeiro 7, 2009

Só aproveitando o tópico...

Estou há 2 horas procurando uma apostila decente de DOM no google e não acho...

Se alguem puder me indicar alguma eu agradeceria...

Vlw...

Cara, tenta no apostilando.com.br costumo procurar lá direto.

Henrique Barcelos · Janeiro 7, 2009

Cara, temos duas maneiras uma ótima e outra mais ou menos.

mais ou menos: Suponho que você deva ter uma folha de estilos em um arquivo separado, se não tiver, eu recomendo, pois limpa bastante o seu código html pois não precisa do <script></script> e você não vai colocar atributos de estilo diretamente nas tags.

O CSS tem algumas metaalgumas coisas (não me lembro o nome) que é aplicado em alguns eventos, como receber foco por exemplo:
input.texto{border-color: #000000;}
 
 //quando recebe foco:
 input.texto:focus{border-color: #006699;}
A má notícia é que não fufa em todos os browsers (firefox sei que funciona muito bem).

Ótima: faz os arquivos de folha de estilos e de script separados limpando uma boa parte do código, e coloca os eventos (tipo Onfocus) nas tags html.

Não sei se resolveu muito não mas espero que ajude.

Na verdade já estou fazendo isso com CSS, mas temos o velho e querido amigo IE que não aceita isso...

O que eu estou tentando fazer é: não usar os eventos onfocus e onblur no HTML e sim pegar todos os elementos input da pagina e quando ele receber o foco, mudar o estilo...

Deem uma olhada no 1º post, vejam se entendem a lógica... o problema é a sintaxe...

Obrigado a todos...

William Bruno · Janeiro 7, 2009

Eu fiz uma coisa parecida.. dá uma olhada:

// super-hiper-mega função de estilizar inputs
window.onload=function(){
var arrObj = document.getElementsByTagName("INPUT");

	for( var i=0; i<arrObj.length; i++ ) {
		arrObj[i].onfocus= function() {
		mudarClass('nodestaque',this);
		}
		arrObj[i].onblur= function() {
		mudarClass('tabe',this);
		}
	}
	
var arrObj2 = document.getElementsByTagName("TEXTAREA");
	for( var i=0; i<arrObj2.length; i++ ) {
		arrObj2[i].onfocus= function() {
		mudarClass('nodestaque',this);
		}
		arrObj2[i].onblur= function() {
		mudarClass('tabe',this);
		}
	}
	function mudarClass(nomeClasse,ids){
		ids.className = nomeClasse;
	}
}

As classes CSS:

/*estilos dos inputs*/
.nodestaque {
	padding: 2px;
	background-color: #FDF3F2;
	border: 1px solid #ED6E37;
}
.tabe {
	border: 1px solid #ED6E37;
	background-color: #fff;
}

Assim você não coloca os eventos diretamente no HTML, mas atribui à todos os input e textareas.

boa-ventura · Janeiro 9, 2009

ou use JQuery!

$(function() {
	$("input[@type='text']")
		.css({'border' : '1px dotted #000000'})
		.focus(function() {	$(this).css({'border' : '1px solid #80EE80'});	})
		.blur(function() {	$(this).css({'border' : '1px dotted #000000'});	});
});

Henrique Barcelos · Janeiro 9, 2009

Putz...

Faz 3 dias que estou tentando responder o topico, mas a pagina demoooooooooooooooora pra carrega e não insere o post... os servidores do imasters devem estar congestionados <_<

Então gente...

Vou fazer do jeito "convencional" mesmo pq eu estou usando ajax, aí a função do william bruno não funciona, analisando ela, é a mesma ideia da minha, do 1º post...

Agradeço a todos pela ajuda...

Ateh a próxima (acho q não demora muito xD)... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Arquivado

[Resolvido] Mudar estilo dos campos ao dar o foco.

Recommended Posts

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

DSerma 19

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Bruno_Ferreira 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

boa-ventura 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante