Tutoriales de Javascript

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

Ya hace tiempo explicamos como hacer un autocompletado en cajas de texto, pero claro, no todo el mundo tiene ganas o tiempo de hacerlo uno mismo. Por ello, no hay nada mejor que usar scripts de otras personas que nos facilitan el trabajo.

SearchField es un javascript no obtrusivo que nos permite añadir sugerencias de búsqueda en nuestras cajas de texto de forma rápida y sencilla. Tan solo hay que añadir un javascript y enlaces a las librerías y a los estilos, para que funcione.
La única pega que le veo es que las palabras de sugerencia están dentro de una variable Javascript y no se realizan mediante llamada Ajax para poder así obtener datos dinámicos, pero bueno, no parece complicado modificarlo para que permita esta opción.
Style Your Website’s Search Field with JS/CSS
Vía / WebAppers