[Resolvido] Value do Input Password

Moises de Oliveira · Julho 13, 2009

Olá a todos.

Bom, não sei se é possível mas quero fazer o seguinte.

Eu tenho um formulário de login em meu site que pede usuário e senha.

O value do Input do Usuário está: "Digite aqui seu usuário"

O value do Input da Senha está: "Digite aqui sua senha"

Porém, como o input da senha é do tipo "password", o value fica com asteríscos ao invés de ficar o texto do value.

Existe alguma forma de deixar o value com os caracteres normais e esconder a senha apenas quando o usuário começar a digitar?

Forte abraço!

-------------------

Edit: Clique aqui para ver o problema :)

Lucas Guima · Julho 13, 2009

Existe um plugin jQuery que faz isso, só não sei dizer como ele haje com campo password. http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Moises de Oliveira · Julho 13, 2009

É justamente o campo password que tá faltando.

Se tu olhares o link que eu coloquei no primeiro post, tu verás o meu problema.

Mas se existe, vou procurar então.

Abraço.

---------

Edit: Já achei aqui, obrigado.

Carutcho · Julho 13, 2009

_{Olá a todos.}

Bom, não sei se é possível mas quero fazer o seguinte.

Eu tenho um formulário de login em meu site que pede usuário e senha.

O value do Input do Usuário está: "Digite aqui seu usuário"

O value do Input da Senha está: "Digite aqui sua senha"

Porém, como o input da senha é do tipo "password", o value fica com asteríscos ao invés de ficar o texto do value.

Existe alguma forma de deixar o value com os caracteres normais e esconder a senha apenas quando o usuário começar a digitar?

Forte abraço!

-------------------

Edit: Clique aqui para ver o problema :)

Po cara, bem legalzinho esse layout hein :D show de bola...

Po desenvolvi um scriptzinho pra você de presente rssss,mesmo você achando com jquery rssss, tava com saudades de javascript. Aee você decide ae se gostaria de usar..

absss

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
function inObj(obj, msg){  
	
	if (obj.name=="usuario"){
		if (obj.value == msg) obj.value='';
	}
	if (obj.name=="senha"){		
		if (obj.value == msg){
			obj.value='';
			obj.type = "password";		
		}		
	}
} 
function outObj(obj, msg){  

	if (obj.name=="usuario"){
		if (obj.value == '') obj.value = msg;
	}
	if (obj.name=="senha"){
		if (obj.value == ''){			
			obj.type = "text";
			obj.value = msg;
		}		
	}
}
</script>
<title>Onistar</title>
</head>
<body>
<form name="form_index" id="form_index">
<input name="usuario" type="text" onFocus="java script:inObj(this,'Digite seu usuario');" onBlur="java script:outObj(this, 'Digite seu usuario');" value="Digite seu usuario" class="login_index"/>
<input name="senha" type="text" onFocus="java script:inObj(this, 'Digite sua senha');"  onBlur="java script:outObj(this, 'Digite sua senha');" value="Digite sua senha" class="login_index"/>
</body>
</html>

Moises de Oliveira · Julho 14, 2009

Opa, obrigado pelo elogio em relação ao meu layout amigo. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

O projeto é ambicioso, vai ser um desafio pra mim, desenvolver um jogo estratégico e online, haha.

Claro que vou usar o seu JS ao invés de usar o JQuery.

Achei muito mais simples e claro, além de usar algo original. :P

Obrigado pelo script e um forte abraço!

Moises de Oliveira · Julho 14, 2009

Agora pela parte da manhã, tentei usar o seu código mas não deu certo.

O value do campo password está mostrando.

Até aí tudo bem, mas quando eu clico no input o texto não some e além disso, quando eu começar a digitar minha senha o campo password deve esconder os caracteres, igual qualquer outro campo password, o que não está acontecendo.

Grato pela ajuda :)

Carutcho · Julho 14, 2009

pode postar ele pra eu ver como está ???

Putzzzzz. cometi um erro tremendo no script, só testei no ff :P rssss

Estou enferrujando mesmo rsss vo dar uma olhada, e fazer uns testes e tentar retornar alguma coisa pra você na hr do almoço q quando vo ter tempo de dar uma olhadinha..

Abssss

Carutcho · Julho 14, 2009

É por isso q eu ODEIO o IE..

Olha so q desgraçado, não é possivel trocar o type dele dessa maneira,

rodei um bucadinho agora a tarde na internet e descobri esse nobre fato >:/

Enfim, achei uma solução aqui interessante q eu vo fazer modificações no código de casa pra fazer isso funcionar so por desafio rsss..

segue o link da solução q achei "em partes".. É até legal postar essas coisas aqui, pq parece q bastante gente procura sobre isso..

http://www.dynamicdrive.com/forums/showpos...amp;postcount=5

absss

klonder · Julho 16, 2009

Crítica construtiva: os moderadores do fórum poderiam ter um pouco mais de paciência antes de setar o tópico como: [Resolvido]... até o momento, não está totalmente Resolvido! Mais paciência pessoal. Alguns tópicos poderão ficar sem a resposta ideal pois muitos usuários não entrariam para ajudar tópicos "resolvidos".

Não é a primeira vez que vejo isso aqui no iMasters. Se eu estiver errado, peço desculpas...

Mas respondendo à dúvida do amigo, a melhor maneira que encontrei é essa que está postada abaixo. Está funcionando tanto no IE quanto no horrível FF. Já tentou trabalhar com display:block para tabelas no Firefox???

Antigamente era display:table-row, agora eu nem sei mais o que é, pois o FF muda o "motor" do JavaScript assim como eu mudo de roupa todo dia!!! (Veja o tópico com id: 330612 para Java Script aqui no iMasters) Aff! Não sei como alguns elogiam esse navegador... tem suas utilidades, mas ainda assim prefiro o IE para JavaScript. Se o IE fosse ruim, não seria maioria do mercado, não rodaria Java Script tão bem evitando distorcer os campos das tabelas.

De qualquer modo, uma ótima alternativa cross-browser para seu problema:

<script type="text/javascript">
function aplicarPWD() {
	document.getElementById("senhaTXT").style.display = "none";
	document.getElementById("senhaPWD").style.display = "block";
	document.getElementById("senhaPWD").focus();
}
</script>
<form name="form1" action="" method="post">
<input type="text" name="usuario" id="usuario" value="Digite seu nome de usuário" size="40" onFocus="this.value=''">
<br><input type="text" name="senhaTXT" id="senhaTXT" value="Digite sua senha" onClick="aplicarPWD()">
<input type="password" name="senhaPWD" id="senhaPWD" style="display:none">
</form>

Carutcho · Janeiro 20, 2010

Rsss caraca rsss eu respondendo esse tópico 7 meses depois da resposta uhauhahuahua, vamos la.

Klonder,

O código que você postou no caso precisaria de adaptação, mas é uma solução para o q ele quer .

Pq pelo que você fez, você insere 2 campos no formulário, 1 do tipo text e outro do tipo password, teria que ter uma crítica que caso o campo de password naum estiver preenchido, ele tem que voltar a mostrar o campo de texto. Essa não é a melhor solução para o problema dele, no caso esse código não é "elegante", mas serveria para o q ele queria, ele só deveria usar em caso de urgencia e como ultima opção, no caso para ele a melhor solução é a com jquery.

<script type="text/javascript">
function checkPWD(obj) {
	var txt = document.getElementById("senhaTXT");
	var pwd = document.getElementById("senhaPWD");
	
	if (obj.id == "senhaTXT"){ 
		txt.style.display = "none";
		pwd.style.display = "block";
		pwd.focus();
		return;
	}
	if (!obj.value){
			pwd.style.display = "none";
        	txt.style.display = "block";
			txt.focus();
	
	}
}
</script>
<form name="form1" action="" method="post">
<input type="text" name="usuario" id="usuario" value="Digite seu nome de usuário" size="40" onfocus="this.value=''">
<br><input type="text" name="senhaTXT" id="senhaTXT" value="Digite sua senha" onclick="checkPWD(this)">
<input type="password" name="senhaPWD" id="senhaPWD" style="display:none" onblur="checkPWD(this)">
</form>

Entendo o que você fala com relação a IE, assim como o IE tem diversas coisas que não trabalha de maneira correta e muito menos segue os padrões estipulados pela W3C, nessa critica me refiro aos navegadores versões anteriores a 8, que são os que tem maiores fatias de mercado.

Eu estou desatualizado do mercado de navegadores, javascript, CSS e afins , até pq eu mudei de área. Eu não posso fazer uma critica mais detalhada ao que você disse, até pq eu naum sei como está o novo IE, confesso que não parei para testar essas coisas.. Mas uma coisa eu tenho certeza.. O IE só é a maioria no mundo pq a Microsoft impostôs no seu sistema operacional, sistema que é o mais utilizado, ou seja, ele não é mais usado pq é o melhor e sim pq a maioria das pessoas são leigas no assunto e não procuram pesquisar sobre novos navegadores.

Para você ter uma idéia, eu trabalhei na americanas.com e cuidava do código de client side de la. Eu era obrigado a trabalhar com base no IE 6 pq 80% das pessoas que compravam no site utilizavam esse navegador, e isso no ano de 2008 até incio de 2009 que foi quando eu sai. Isso é simplesmente pq o nosso digníssimo IE 6 vem na instalação do windows XP e eu tenho certeza que o IE 6 não é nenhum pouco legal de se trabalhar , ainda mais com padrões.

Eu particularmente adoro o FF, acho que não tem debuger de javascript melhor no mercado que o firebug, sei que o FF não segue 100% a risca a W3C, mas lembro

que seguia mt mais que o IE. A única insatisfação que tenho tido com ele, nem é com relação a programação pq naum tenho mais programado em javascript e sim pq tenho achado ele pesado, lento e por isso eu estou passando a usar mais o google chrome.

Absss

Arquivado

[Resolvido] Value do Input Password

Recommended Posts

Moises de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Guima 164

Compartilhar este post

Link para o post

Compartilhar em outros sites

Moises de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Moises de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Moises de Oliveira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carutcho 0

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