muchas gracias por darle seguimiento al tema, aqui voy a publicar como tengo el codigo hasta ahora.
tambien aclaro que asi esta funcionando exactamente como lo haría un placeholder en internet explorer y firefox (estos son los navegadores que no lo soportan) pero los otros navegadores que si soportan placeholder, no esta funcionando bien ya que se queda en el primer campo (type="text"), son chrome, safari, opera.
saludos!
Código HTML:
<html>
<head>
<script type="text/javascript" src="js/modernizr-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery-placeholder.js"></script>
</head>
<body>
<div id='popup'
style="height:153px; width:300px; padding:0px; margin:0px; margin-right:-10px; background:url(imgs/bg_registro.jpg) right top repeat-y;}">
<div class="acotacion" id="form-footer" align="center">
<form id="form1" name="form1" method="post" action="valida.php">
<input name="usuario" type="text" placeholder="usuario*" class="globo-form" />
<input name="password" type="password" class="globo-form oculto" />
<input name="text" type="text" class="globo-form" placeholder="contraseña*" />
<div id="bg-ingresar">
<input name="submit" type="submit" value="" class="form-login" />
</div>
</form>
</div>
</div>
</body>
</html> jquery-placeholder.js
Código Javascript
:
Ver original$(document).ready(function() {
if(!Modernizr.input.placeholder){
$("input").each(
function(){
if($(this).val()=="" && $(this).attr("placeholder")!=""){
$(this).val($(this).attr("placeholder"));
$(this).focus(function(){
if($(this).val()==$(this).attr("placeholder")) $(this).val("");
if($(this).attr("name")=="text")
{
$(this).attr("class","oculto"); //ocultamos el type="text"
$(this).prev().attr("class","globo-form"); //mostramos el type="pass"
$(this).blur();
$(this).prev().focus();
}
});
$(this).blur(function(){
if($(this).val()=="")
{
if($(this).attr("name")=="password")
{
$(this).next().attr("class","globo-form"); //mostramos el type="text"
$(this).attr("class","oculto"); //ocultamos el type="pass"
}
$(this).val($(this).attr("placeholder"));
}
});
}
});
}
});
Código CSS:
Ver original.oculto { display: none !important; }
.globo-form{
display:inline;
background:#ffffcc;
border:0px;
outline:none;
}