Label dentro do input

[bytchello 0]

Pessoal criei uma função com jquery para adicionar o label do campo dentro do campo Input ate ai funciona bem mais quando tendo adicionar um IF para realizar a condição de que se estiver em focus o type da senha deve mudar de text para password mais não estou tendo sucesso. aguem pode me ajudar, talves alguma forma de testar novamente a condição sem que seja preciso recarregar a pagina.

 

segue o codigo

 

$(document).ready(function(){


var senha = $("#senha").attr("value");

$("#login").focus(function(){

$(this).attr("value", "");
});

$("#login").blur(function(){
$(this).attr("value", "LOGIN");

});

$("#senha").focus(function(){

$(this).attr("value", "");

});

$("#senha").blur(function(){
$(this).attr("value", "SENHA");


});


if(senha == ""){
$("#senha").attr("type", "password");
}else{
$("#senha").attr("type", "text");
}
});

[William Bruno 1501]

em qual navegador vc está testando ?

 

no ie é impossível mudar o type, por problemas dele.

[@gsales_ 0]

Cara, porque vc quer criar um "label" dentro de um "input"?

 

Quanto a esse código:

if(senha == ""){

$("#senha").attr("type", "password");

}else{

$("#senha").attr("type", "text");

}

 

Ele só será executado uma vez, logo quando a página carregar. O código está certo, mas para que ele mude o type é necessário colocar esse if dentro de um evento, no seu caso dentro do focus.

[bytchello 0]

William Bruno eu fiz o teste no IE8 e anteriores e realmente a mudança do type não funciona só funciona do IE9 e 10, não tinha me atentado pra isso, vou tentar outras possibilidades. valew pela dica.

 

@gsales_ o que eu quero mesmo eh usar a função como se fosse o placeholder mais com o IE não permite que isso ocorra :pinch: então imaginei que usando o jquery poderia contornar esse problema. o fato eh que funciona bem mais preciso que quando estiver no campo senha e estiver em focus o campo mude para password.

 

alguma dica para que eu possa chegar a esse resultado e que funcione em todos os navegadores?

 

 

Abraço

[Ted k' 126]

Já passei por isso, olha como resolvi:

 

No focus...

 

var atual = $(this);

// Transformar o campo senha.
if (senha != ""){
atual.remove();
add_senha.append('<input type="password" name="password" value="" />');
add_senha.find("input").focus();
}

 

No blur...

 

// Transformar o campo senha.
if (senha != ""){

this.type = "text";

}

[bytchello 0]

Ted k' valew pela dica, fiz algo parecido e complementei com sua dica mais ainda acontece o seguinte, partindo do pensamento de que nunca sabemos o que o usuário ira fazer na pagina, tipo se clicar uma vez no input senha, ele muda para type password se ele clica fora não retorna para o value SENHA, se coloco para voltar a senha em outra ação o input perde o type password.

$(document).ready(function(){
			
	
	var senha = $("#senha").val();	
		
	$("#login").focus(function(){
	
	$(this).attr("value", "");
});
	
	$("#login").blur(function(){
		$(this).attr("value", "LOGIN");
		
	});
	
		$("#senha").focus(function(){
	
	$(this).remove("#senha");
	$(".boxInputSenha").prepend("<input id='senha' class='inputTextSenha' type='password' name='senha'/>");
	$(".inputTextSenha").focus();
	
	
		$("#senha").blur(function(){
		$(this).attr("value", "SENHA");
	
		if(senha != "SENHA"){
	$(this).attr("value", "");
		
	}else{
		$(this).remove("#senha");
	$(".boxInputSenha").prepend("<input id='senha' value='SENHA' class='inputTextSenha' type='text' name='senha'/>");
	
	}
		
	});
	
	
});
	


	
});

 

 

não sei de eh possível de colocar um loop para refazer o processo de checar a condição.



Abraço

[bytchello 0]

RESOLVIDO HEHE

 

Por conta desse desprezível IE em alguns momentos temos que fazer algumas gambiarras pra conseguir alcançar um determinado objetivo, sendo assim fiz uma gambiarra mais uma gambiarra muito funcional.

 

Segue completo

 

FORM

 

<form class="formAcesso" method="POST" action="teste.php">
<div class="boxInputLogin">
<input id="login" type="text" name="login" class="inputTextLogin"/>
</div>
<div class="boxInputSenha">
<input id="senha" type="password" name="senha" class="inputTextSenha"/>
<input type="submit" value="" class="inputButton"/>
</div>

</form>

 

 

CSS

 

.formAcesso{
	width: 360px;
	margin: 75px auto;
}

.formAcesso .inputTextLogin{
	width: 350px;
	height: 36px;
	margin: 0 0 10px 0;
	display: inline;
	float: left;
	border: none;
	padding: 0 0 0 3px;
	color: #47A0CC;	
	line-height: 39px;
}

.formAcesso .inputTextSenha{
	width: 300px;
	height: 36px;
	margin: 0 0 10px 0;
	display: inline;
	float: left;
	border: none;
	padding: 0 0 0 3px;
	color: #47A0CC;
	background: #FFF;
	line-height: 39px;
	
}

.formAcesso .inputButton{
	width: 50px;
	height: 36px;
	background: #47A0CC url(../images/bg-botao-submit-acesso.png);
	border: none;
	float: left;
	cursor: pointer;
}

.formAcesso .boxInputLogin{
	height: 36px;
	border: 2px solid #47A0CC;
	float: left;
	padding: 3px 3px 3px 0;
	margin: 0 0 10px 0;
}

.formAcesso .boxInputSenha{
	height: 36px;
	border: 2px solid #47A0CC;
	float: left;
	padding: 3px 3px 3px 0;
	margin: 0 0 10px 0;
	background: #FFF;	

}

 

 

JS (A DOR DE CABEÇA rs)

 

$(document).ready(function(){
			
		$("#login").css("background","url(images/bg-inputTextLogin.png)");
		$("#senha").css("background","url(images/bg-inputTextSenha.png)");
		
	
		
	$("#login").focus(function(){
	$(this).css("background","");

});
	
	$("#login").blur(function(){
		
		var login = $("#login").val();	
		
		if(login == ""){	
		$("#login").css("background","url(images/bg-inputTextLogin.png)");
						}else{
			
			$(this).css("background","");
							}	

});
		

	
			$("#senha").focus(function(){
	$(this).css("background","");

});
	
	$("#senha").blur(function(){
		
		var senha = $("#senha").val();	
		
		if(senha == ""){	
		$("#senha").css("background","url(images/bg-inputTextSenha.png)");
						}else{
			
			$(this).css("background","");
							}	

});
	
	
	});

esqueci de mostrar o resultado em screen

 

http://postimg.org/image/zewbjv04z/