Year: 2007

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

Normalmente lo que intentamos es comprimir nuestro código Javascript o bien para que ocupe menos, o bien para ofuscarlo. En este caso se trata de un script que nos permite embellecer scripts comprimidos.

Así, por ejemplo, el código de Google Reader, el cual, como todos los de Google son casi imposibles de seguir, lo veríamos así:

...
function nd(a, b) {
a = String(a);
return (new Array(Math.max(0, b - a.length + 1))).join(mc) + a
}
var l = "";
function tj() {
return Array.prototype.join.call(arguments, l)
}
var R = " ",
nc = ", ",
Jc = ":";
function zQ(a) {
...

Beautify Javascript

Vía / Ajaxian