Texto explicativo en las cajas de los formularios

Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Vie23Nov2007

Texto explicativo en las cajas de los formularios

Dentro de una serie de artículos sobre Javascript he encontrado este script que permite mostrar un texto explicativo en las cajas de texto y que desaparezca cuando el usuario ha escrito algo.

Primeramente necesitamos el HTML que se mostrará, se trata de un formulario normal, pero el texto explicativo, mediante estilos, en vez de aparecer debajo como se vería sin estilos, al darle posición absoluta, se mostrará sobre la caja de texto.

<style type="text/css">
.helptext {
  position: absolute;
  color: #999999;
  z-index: 10;
  font-size: small;
  overflow: hidden;
}
</style>

<form action="" method="post">
  <input type="text" name="login" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
  <div class="helptext" id="label_login" onclick="ChangeFocus(this);">
    Enter Login Name
  </div>
    
  <input type="password" name="password" value="" onkeyup="UpdateHelpText(this);" onmouseup="UpdateHelpText(this);" />
  <div class="helptext" id="label_password" onclick="ChangeFocus(this);">
    Enter Password
  </div>
    
  <input type="submit" name="submit" value="Login" onclick="return false;" />
</form>

<script type="text/javascript" language="JavaScript">
  UpdateHelpText(document.getElementsByName('login')[0]);
  UpdateHelpText(document.getElementsByName('password')[0]);
</script>

Acto seguido, se necesitan las funciones javascript, en este caso son dos, una de ella que pasa el foco a la caja de texto cuando se pincha en el texto explicativo (recordad que está encima de la caja de texto):

function ChangeFocus(el) {
  while (el.tagName != 'INPUT') 
    el = el.previousSibling;
  el.focus();
}

Y la otra función que oculta el texto explicativo dependiendo del contenido de la caja de texto:

function UpdateHelpText(el)
{
  var label = el;
  while (label.tagName != 'DIV')
    label = label.nextSibling;
  if (el.value == '') {  // Field is empty; show text
    label.style.left = getElementAbsPosX(el) + 'px';
    label.style.top = (getElementAbsPosY(el) - 7) + 'px';
    label.style.visibility = 'visible';
  }
  else { // Field is not empty; hide text
    if (label)
      label.style.visibility = 'hidden';
  }
}

Advanced JavaScript III

Vía / AjaxLine