Tenes varias formas de hacerlo, el problema es la compatibilidad.
html5 incorpora el atributo
placeholder para la función que querés, pero IE no lo soporta, sin embargo hay un plugin de jquery (en realidad hay varios), para darle más funcionalidad a los forms y sus nuevos atributos en IE (formalize me, es uno de ellos
http://formalize.me/jquery_demo.html ) Sin embargo, aunque el value de tu campo esté vació, van a tomar eñl valor de placeholder como tal
La otra es hacerlo solo con javascript y css sin librerias. Por lo que deberías validar que usuario no sea "usuario" (como seguramente tenes un form para registrarse, en este deberías eliminar a usuario como un nombre válido)
Código HTML:
Ver original<!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"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> /*<![CDATA[*/
.texto{
color: #666;
}
/*]]>*/
<script type="text/javascript"> //<![CDATA[
function color(campo,texto){
var elcampo = document.getElementById(campo).value;
if(elcampo == texto) {
document.getElementById(campo).style.color="#666";
}
}
function Validar(){
var elusuario = document.getElementById('nombre_ingreso').value;
if(elusuario == "usuario"){
alert('nombre de usuario incorrecto');
return false;
}
}
//]]>
<p>Solo javascript sin lbrerias
</p> <form action="x.php" method="post" onsubmit="return Validar();"> <input type="text" class="texto" name="nombre_ingreso" value="usuario" id="nombre_ingreso" onclick="this.value='';this.style.color='#000';" onfocus="this.select()" onblur="this.value=!this.value?'usuario':this.value; color(this.id,'usuario');" />
<input type="text" class="texto" name="clave_ingreso" value="contraseña" id="clave_ingreso" onclick="this.value='';this.style.color='#000';" onfocus="this.select()" onblur="this.value=!this.value?'contraseña':this.value; color(this.id,'contraseña');" />
<input type="submit" value="Ingresar" />
Saludos