FAQs JavaScript

T4X · #**211** (**permalink**) 26/04/2005, 14:48

Pregunta: Cómo hago la letra capital en un text input?
Respuesta:

En el text-input colocas el método onBlur colocas lo siguiente:

Código PHP:

  onBlur="this.style.textTransform='capitalize'"

Y si lo deseas, el texto en minusculas junto con la letra capital, entonces quedaría así:

Código PHP:

  onBlur="this.value = this.value.toLowerCase(); this.style.textTransform='capitalize'"

Saruman · #**212** (**permalink**) 03/05/2005, 10:38

Pregunta: ¿Cómo transformo un valor en monedas?

utilización:

cantidad = 5
precio_unitario = 10.98

total = cantidad * precio_unitario
//el resultado de total de haber multiplicado esos dos valores en javascript nos traerá como resultado: 54.900000000000006
//para redondearlo y transformarlo a moneda utilizaremos la siguiente función:

total = formatCurrency(total);
document.write(total);

resultado: 54.90

//Nota: no le pases el parseInt() después de multiplicar el valor ok?

Función:

Código:

function formatCurrency(num) {
	num = num.toString().replace(/\$|\,/g,'');
	if(isNaN(num)) num = "0";
	sign = (num == (num = Math.abs(num)));
	num = Math.floor(num*100+0.50000000001);
	cents = num%100;
	num = Math.floor(num/100).toString();
	if(cents<10) cents = "0" + cents;
	for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
	num = num.substring(0,num.length-(4*i+3))+
	num.substring(num.length-(4*i+3));
			
	return (((sign)?'':'-') + num + '.' + cents);
}

Saludos

KarlanKas · #**213** (**permalink**) 09/05/2005, 10:55

P.- Cómo hacer un selector de color?
R.-Hay varias opciones. Una de las mismas es este código que propongo:

Código PHP:

  <html> 

<head> 

 
<script> 

 
//Script de KarlanKas para Foros Del Web 

//Muchas gracias a caricatos por advertirme de los fallitos ;-) 

//He aprovechado para mejorar un poco el script 

 
hexadecimal=['0' , '1' , '2' , '3' , '4' , '5' , '6' , '7' , '8' , '9' , 'A' , 'B' , 'C' , 'D' , 'E' , 'F']; 

r=0; 

g=0; 

b=0; 

colores=["r","g","b"]; 

 
function color(incremento,n){ 

 
    if(eval(colores[n])+incremento<256 && eval(colores[n])+incremento>-1){ 

        eval(colores[n]+"+="+incremento); 

    } 

 
    document.getElementById("campo").style.backgroundColor="rgb("+r+","+g+","+b+")"; 

    document.getElementById("campo").style.color="rgb("+(255-r)+","+(255-g)+","+(255-b)+")"; 

     

    document.getElementById("color").value="#"+convertir(r)+convertir(g)+convertir(b); 

    document.getElementById("color2").value="rgb("+r+","+g+","+b+")"; 

 
} 

 
function convertir(numero){ 

    numero=parseInt(numero) 

    enHexa=hexadecimal[parseInt(numero/16)]+""+hexadecimal[numero%16]; 

    return enHexa; 

} 

</script> 

 
<style> 

*{ 

    font:normal 10px/10px verdana; 

} 

#campo{ 

    height:400px; 

} 

div[id="campo"]{ 

    height:210px!important; 

} 

#campo{ 

    width:400px; 

    background-color:rgb(0,0,0); 

    font:bold 20px/20px verdana; 

    color:#fff; 

    text-align:center; 

    padding-top:190px; 

} 

</style> 

</head> 

 
<body> 

 
<div style="width:400px;"> 

    <div id="campo" >FOROS DEL WEB</div> 

 
    <table>

        <tr>

            <td>En Hexadecimal:</td>

            <td><input type="text" name="color" id="color" readonly></td>

        <tr>

            <td>En Decimal:</td>

            <td><input type="text" name="color2" id="color2" readonly><br></td>

        </tr>

    </table> 

    <div style="float:left;border:solid 1px black;padding:10px;width:110px;">Mantén apretado cada botón hasta llegar al valor deseado.</div> 

    <table style="text-align:center;"> 

        <tr> 

            <td><input type="button" onmouseup="clearInterval(pepe)"  value="-" onmousedown="pepe=setInterval('color(-5,0)',100)"></td>

            <td>Rojo</td> 

            <td><input type="button" onmouseup="clearInterval(pepe)"   value="+" onmousedown="pepe=setInterval('color(5,0)',100)"></td>

        </tr> 

        <tr> 

            <td><input type="button" onmouseup="clearInterval(pepe)"  value="-" onmousedown="pepe=setInterval('color(-5,1)',100)"></td>

            <td>Verde</td>

            <td><input type="button" onmouseup="clearInterval(pepe)"  value="+" onmousedown="pepe=setInterval('color(5,1)',100)"></td>

        </tr>

        <tr> 

            <td><input type="button" onmouseup="clearInterval(pepe)"  value="-" onmousedown="pepe=setInterval('color(-5,2)',100)"></td> 

            <td>Azul</td> 

            <td><input type="button" onmouseup="clearInterval(pepe)"  value="+" onmousedown="pepe=setInterval('color(5,2)',100)"></td> 

        </tr> 

    </table> 

</div> 

 
</body> 

</html>

occiso · #**214** (**permalink**) 21/05/2005, 05:02

P: ¿Cómo puedo añadir un método a la clase String para que me borre los espacios en blanco?

R:

Muchos nos hemos preguntado alguna vez porque no viene intrínsecamente definido en la clase String un método Trim que nos elimine los espacios en blanco que pueda haber en una cadema.

Pero eso lo podemos solucionar nosotros mismos añadiendoselo (puedes meterlo en un archivo .js y servirte para cualquier página que lo necesites):

Código:

<HTML>
<HEAD>
<TITLE>Document </TITLE>
  <script language="javascript">
/* ----------------------------------------------------------------------------------- 
------- Trim(), LTrim(), RTrim() ----------------------------------------------------- 
------- 
------- Metodos que eliminan los espacios en blanco de una cadena */

  String.prototype.Trim = function(){
      return this.replace(/\s+$|^\s+/g,""); 
  }

  String.prototype.LTrim = function(){
       return this.replace(/^\s+/,""); 
  }

  String.prototype.RTrim = function(){
        return this.replace(/\s+$/,""); 
  }
  
/*-------------------------------------------------------------------------------------*/

  function ambos(str){
      str = str.Trim();
      alert (  '|' + str + '|');
  }

  function izq(str){
      str = str.LTrim();
      alert (  '|' + str + '|');
  }

  function dcha(str){
      str = str.RTrim();
      alert (  '|' + str + '|');
  }

  </script>
</HEAD>

<BODY>
<button onclick="ambos('   galleta   ')">ambos lados</button>
<button onclick="izq('   galleta   ')">izquierda</button>
<button onclick="dcha('   galleta   ')">derecha</button>
</BODY>
</HTML>

occiso · #**215** (**permalink**) 21/05/2005, 05:30

P: ¿Cómo puedo validar los formularios y que los datos que introducen son los correctos?

R: Muchas son las consultas sobre como validar este o aquel campo. Bien pues he desarrollado una pequeña clase en Javascript que creo cubre el 90% de validaciones que tengamos que realizar.

Para manejarla bien hay que saber algo de programación orientada a objetos (POO) pero si se le hecha un vistazo es bastante intuitiva y esta muy comentada. Como es un archivo bastante extenso meto un enlace a un archivo .rar con el archivo .js en cuestion y una pagina html de ejemplo de utilización y otro archivo .css con los estilos.

La clase sigue un código estándar y yo la he probado en Opera, IExplorer y Firefox y me ha funcionado perfectamente. Lo que no es estándar son los estilos css.

EDITADO (07/08/2005):

Como el enlace se había roto vuelvo a poner una direccion para que os podais bajar todos los archivos en uno comprimido. He hecho algunas mejoras respecto a la version anterior. Ahora voy por la version 1.1. Ahi la teneis:

Enlace

T4X · #**216** (**permalink**) 01/06/2005, 17:15

Pregunta: Cómo resaltar los checkboxes como lo hace hotmail?
Créditos: JavierB

Respuesta:
Usa este código, es simple pero te funcionará...

<html>
<head>
<script>
function marcar(obj) {
elem=obj.parentNode.parentNode;
elem.style.backgroundColor=(obj.checked) ? 'red' : 'white';
}

function marcarTodos(obj) {
elem=document.getElementsByName('algo');
for(i=0;i<elem.length;i++) {
elem[i].checked=obj.checked;
fila=elem[i].parentNode.parentNode;
fila.style.backgroundColor=(obj.checked) ? 'red' : 'white';
}
}
</script>
</head>

<body>
<table width="400px" border="1">
<tr>
<td> </td>
<td><input type="checkbox" name="todos" onclick="marcarTodos(this)"/></td>
</tr>
<tr>
<td> </td>
<td>
<input type="checkbox" name="algo" onclick="marcar(this)"/>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="checkbox" name="algo" onclick="marcar(this)"/>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="checkbox" name="algo" onclick="marcar(this)"/>
</td>
</tr>
</table>
</body>
</html>

JavierB · #**217** (**permalink**) 08/06/2005, 03:56

P - ¿Como puedo hacer para que solo se vean las filas de una tabla (<table>) que coinciden con lo escrito en un cuadro de texto?

R - Con este código:

Código PHP:

  <html>

<head>

<script>

function buscar(txt) {

  obj=document.getElementById('tabla');

  // Recorremos todas las filas de la tabla

  for (i=0;ele=obj.getElementsByTagName('tr')[i];i++) {

    // elegimos la primera celda de la fila

    celda = ele.getElementsByTagName('td')[0]

    // averiguamos que hay dentro de la celda

    dato = celda.innerHTML;

    // vemos si coincide con lo que se ha escrito en el cuadro de texto

    iz = dato.substr(0,txt.length);

    celda.style.display = (txt==iz) ? '' : 'none';

  }

}

</script>

</head>

<body>

<input type="text" onkeyup="buscar(this.value)" />

<table id="tabla" border="1">

<tr><td>avion</td></tr>

<tr><td>coche</td></tr>

<tr><td>aviador</td></tr>

<tr><td>coger</td>

</table>

</body>

</html>

MorZilla · #**218** (**permalink**) 29/06/2005, 08:26

Cita:

Iniciado por CHuLoSoY

P: Como deshabilito la selección de un texto?

El código de CHuLoSoy puede ser mejorado:

Código HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>Hecho por MorZilla</title>
<script type="text/javascript">
document.onselectstart = new Function("return false");
// Para IE
</script>
<style type="text/css">
* {
-moz-user-select: none; /* Para navegadores Mozilla */
user-select: none; /* Posiblemente en futuros navegadores */
}
</style>
<body>
<h1>¡MorZilla!</h1>
</body>
</html>

Ojalá les sirva!

MorZilla · #**219** (**permalink**) 29/06/2005, 08:39

Cita:

Iniciado por T4X

P: Cómo abrir una ventana popUp sin menus contextuales ó mejor un Dialogo Web???????

Ten en cuenta que esta función solo se desempeña en IE 5.5 y superior, aunque se está investigando si esta función de JavaScript tambien sea compatible con otros browsers.

Estas funciones sólo funcionan en IE, en Mozilla y otros navegadores provoca mensajes de error.
Recomiendo modificar el código:

Código PHP:

  function verDialogo(url,nombre,argumentos) {

try {

if(window.showModalDialog) return showModalDialog(url,nombre,argumentos);

else return open(url,nombre,argumentos);

}

catch(e) { alert("Error JavaScript"); }

}

Tengan en cuenta que no comprobé el código todavía. (Por eso incluyo el try...catch)

causita · #**220** (**permalink**) 30/06/2005, 14:56

no soy diestro en el manejo del Javascript pero "jugando" y poniendo en práctica las clases q alguna vez tuve les pongo un script muy útil (espero no esté repetido)

P: Cómo hago un rollover para q se vea en celdas diferentes de una tabla?
R:

Cita:

<html>
<head>
<script languaje="javascript">
function cambiar(foto){
document.getElementById('mostrar').innerHTML = '<img src="' + foto + '">';
}
</script>
</head>
<body>
<table width="450">
<tr>
<td><a href="#nada" onmouseover="cambiar('1.GIF')" OnMouseout="cambiar('inicio.GIF')">foto 1</a></td>
<td><a href="#nada" onmouseover="cambiar('2.GIF')" OnMouseout="cambiar('inicio.GIF')"">foto 2</a></td>
</tr>
<tr>
<td colspan="2"><div id="mostrar"><img src="inicio.gif"></div></td>
</tr>
</table>
</body>
</html>

Espero les sea d utilidad

Trulala de cordoba · #**221** (**permalink**) 01/07/2005, 13:01

P: ¿Como paso datos de una ventanita abierta a la página que la abrío en Firefox?
R:

En firefox no funciona opener.location por lo cual para pasar datos a un campo de formulario que está en otra ventanita debemos usar esta forma:

self.opener.document.NombredelFormulario.Nombredel Campo.value ='algo'

JavierB · #**222** (**permalink**) 09/07/2005, 10:31

P: Como validar que los datos que se van introduciendo en un cuadro de texto de un formulario son correcto.

R: Utilizando este código (Probado en IE 6.0 y Firefox 1.4)

Código PHP:

  <html>

<head>

<script>

function validar(e) {

    tecla = (document.all) ? e.keyCode : e.which;

    if (tecla==8) return true; //Tecla de retroceso (para poder borrar)

    patron =/[A-Za-z]/; // Solo acepta letras

    //patron = /\d/; Solo acepta números

    //patron = /\w/; Acepta números y letras

    //patron = /\D/; No acepta números

    te = String.fromCharCode(tecla);

    return patron.test(te); 

} 

</script>

</head>

 
<body>

<input type="text" name="textfield" onkeypress="return validar(event)">

</body>

</html>

Saruman · #**223** (**permalink**) 19/07/2005, 15:01

P: ¿Cómo hago para que cuando se presione la tecla ESCAPE se cierre una ventana?

R: así:

Código:

 
function _CloseOnEsc() {
if (event.keyCode == 27) { window.close(); return; }
}
function InitESC() {
document.body.onkeypress = _CloseOnEsc;
}

Utilización:

Código HTML:

 <body onload="InitESC();"></body>

Saruman · #**224** (**permalink**) 26/07/2005, 14:27

P: ¿Cómo puedo transformar Números a Letras?

R: Utiliza las siguientes funciones para que puedas transformar números enteros en letras. Esta función soporta hasta números que van desde el Cero hasta el el Billón.

Funciones:

Código:

 
function letras(c,d,u)
{
var centenas,decenas,decom
var lc=""
var ld=""
var lu=""
centenas=eval(c);
decenas=eval(d);
decom=eval(u);
switch(centenas) 
{
case 0: lc="";break;
case 1: 
{
if (decenas==0 && decom==0)
lc="Cien"
else
lc="Ciento ";
}
break;
case 2: lc="Doscientos ";break;
case 3: lc="Trescientos ";break;
case 4: lc="Cuatrocientos ";break;
case 5: lc="Quinientos ";break;
case 6: lc="Seiscientos ";break;
case 7: lc="Setecientos ";break;
case 8: lc="Ochocientos ";break;
case 9: lc="Novecientos ";break; 
} 
switch(decenas) 
{
	case 0: ld="";break;
	case 1:
{ 
switch(decom) 
{
	case 0:ld="Diez";break;
	case 1:ld="Once";break;
	case 2:ld="Doce";break;
	case 3:ld="Trece";break;
	case 4:ld="Catorce";break;
	case 5:ld="Quince";break;
	case 6:ld="Dieciseis";break;
	case 7:ld="Diecisiete";break;
	case 8:ld="Dieciocho";break;
	case 9:ld="Diecinueve";break;
}
}			 
break;
case 2:ld="Veinte";break;
case 3:ld="Treinta";break;
case 4:ld="Cuarenta";break;
case 5:ld="Cincuenta";break;
case 6:ld="Sesenta";break;
case 7:ld="Setenta";break;
case 8:ld="Ochenta";break;
case 9:ld="Noventa";break; 
}
switch(decom) 
{
	case 0: lu="";break;
	case 1: lu="Un";break;
	case 2: lu="Dos";break;
	case 3: lu="Tres";break;
	case 4: lu="Cuatro";break;
	case 5: lu="Cinco";break;
	case 6: lu="Seis";break;
	case 7: lu="Siete";break;
	case 8: lu="Ocho";break;
	case 9: lu="Nueve";break; 
}
 
if (decenas==1)
{
return lc+ld;
}
if (decenas==0 || decom==0)
{
return lc+" "+ld+lu;
}
else
{
if(decenas==2) 
{
ld="Veinti";
return lc + ld + lu.toLowerCase();
}
else
{
return lc+ld+" y "+lu
}
}
}
 
function getNumberLiteral(n)
{ 
var m0,cm,dm,um,cmi,dmi,umi,ce,de,un,hlp,decimal;
 
if (isNaN(n)) {
alert("La Cantidad debe ser un valor Numérico.");
return null
}
m0= parseInt(n/ 1000000000000); rm0=n% 1000000000000;
m1= parseInt(rm0/100000000000); rm1=rm0%100000000000;
m2= parseInt(rm1/10000000000); rm2=rm1%10000000000;
m3= parseInt(rm2/1000000000); rm3=rm2%1000000000;
cm= parseInt(rm3/100000000); r1= rm3%100000000;
dm= parseInt(r1/10000000); r2= r1% 10000000;
um= parseInt(r2/1000000); r3= r2% 1000000;
cmi=parseInt(r3/100000); r4= r3% 100000;
dmi=parseInt(r4/10000); r5= r4% 10000;
umi=parseInt(r5/1000); r6= r5% 1000;
ce= parseInt(r6/100); r7= r6% 100;
de= parseInt(r7/10); r8= r7% 10;
un= parseInt(r8/1);
//r9=r8%1; 
999123456789
if (n< 1000000000000 && n>=1000000000)
{
tmp=n.toString();
s=tmp.length;
tmp1=tmp.slice(0,s-9)
tmp2=tmp.slice(s-9,s);
 
tmpn1=getNumberLiteral(tmp1);
tmpn2=getNumberLiteral(tmp2);
 
if(tmpn1.indexOf("Un")>=0)
pred=" Billón "
else
pred=" Billones "
return tmpn1+ pred +tmpn2;
}
 
if (n<10000000000 && n>=1000000)
{
mldata=letras(cm,dm,um); 
hlp=mldata.replace("Un","*");
if (hlp.indexOf("*")<0 || hlp.indexOf("*")>3)
{
mldata=mldata.replace("Uno","un");
mldata+=" Millones ";
}
else
{
mldata="Un Millón ";
}
mdata=letras(cmi,dmi,umi);
cdata=letras(ce,de,un);
if(mdata!="	")
{
if (n == 1000000) {
	mdata=mdata.replace("Uno","un") + "de";
} else {
	mdata=mdata.replace("Uno","un")+" mil ";
}
}
 
return (mldata+mdata+cdata);
} 
if (n<1000000 && n>=1000)
{
mdata=letras(cmi,dmi,umi);
cdata=letras(ce,de,un);
hlp=mdata.replace("Un","*");
if (hlp.indexOf("*")<0 || hlp.indexOf("*")>3)
{
mdata=mdata.replace("Uno","un");
return (mdata +" mil "+cdata);
}
else
	return ("Mil "+ cdata);
} 
if (n<1000 && n>=1)
{
return (letras(ce,de,un));
}
if (n==0)
{
return " Cero";
}
return "No disponible"
}

Utilización:

Código:

 var enteros = 50; 
var resultado = getNumberLiteral(enteros)
alert(resultado)

Enjoy

Saruman · #**225** (**permalink**) 04/08/2005, 12:21

P: ¿Cómo puedo validar que el usuario seleccione al menos un checkbox?
R: Utilizando esta función:

Código PHP:

  <script language="javascript">

function validar_checkbox() { 

var total = f.opciones.length;

var selected = false;

 

if (total != null) {

for (i=0; i<total; i++) {

    if (f.opciones[i].checked == true) {

     selected = true;

     break;

    }

}

} else {

if (f.opciones.checked == true) {

    selected = true;

}

}

 

if (selected == false) {

alert("Debe seleccionar al menos una opción.");

return false

}

}

</script>

también puedes ver: http://www.forosdelweb.com/showpost....9&postcount=22

Enjoy!

derkenuke · #**226** (**permalink**) 03/09/2005, 13:01

P: Quiero utilizar

Código PHP:

  a:hover:before {content: "["}

a:hover:after{content:"]"}

sobre IE, que no lo soporta. ¿Alternativa?

R: Puedes copiar este codigo que mostrara corchetes naranjas antes y despues de todos los enlaces sólo cuando el raton esté encima. Incluso más estetico, pues no se deforma el contenido de la pagina. (Habria que tener cuidado con los enlaces que tienen como contenido imagenes y tal, eso de vuestra mano

)

Código PHP:

  <html>

 
<head>

 
<style>

.corchetes {

    color: #f93; 

    font-weight:bold;

    width:3px; 

    visibility:hidden; 

    display:inline;

}

</style>

 
</head>

 
<body>

 
 
<a href="a.htm">enlace</a> texto texto texto 

<a href="s.html">otro enlace</a> mas texto 

<a href="i.htm">y otro</a> y se acaba aqui. 

 
<script> 

 
// necesitaba dos funciones, el insertBefore que ya existe, y el insertAfter que nos lo sacamos de la manga

function insertAfter(parent, node, referenceNode) {

    parent.insertBefore(node, referenceNode.nextSibling);

}

 
// la coleccion de <a> (anchors)

var As=document.getElementsByTagName("A"); 

var corchete1,corchete2;

 
//por cada enlace

for(var a=0;a<As.length;a++) {

 
    //quitamos los espacios anteriores y posteriores a los enlaces, que si no con el corchete oculto parecera doble espaciado

    var anterior = As[a].previousSibling;

    if(anterior!=null) {

        anterior.nodeValue  = anterior.nodeValue.substr(0,anterior.nodeValue.length-1); 

    }

    var siguiente = As[a].nextSibling;

    if(siguiente!=null) {

        siguiente.nodeValue = siguiente.nodeValue.substr(1);

    }

    

    //creamos los corchetes, y les aplicamos el estilo "corchetes"

    corchete1=document.createElement("DIV");

    corchete2=document.createElement("DIV");

    corchete1.appendChild( document.createTextNode("[") );

    corchete2.appendChild( document.createTextNode("]") );

    corchete1.className=corchete2.className="corchetes";

    

    //insertamos los corchetes antes y despues del enlace

    As[a].parentNode.insertBefore( corchete1 , As[a] );

    insertAfter( As[a].parentNode, corchete2, As[a] );

    

    //los eventos que se ocuparan de poner los enlaces y quitarlos

    As[a].onmouseover=function() { 

        this.previousSibling.style.visibility="visible";

        this.nextSibling.style.visibility="visible";

    }

    As[a].onmouseout=function() { 

        this.previousSibling.style.visibility="hidden";

        this.nextSibling.style.visibility="hidden";

    }

}

 
</script>

 
 
</body>

 
</html>

Debe ir al final de la pagina, por supuesto.

KarlanKas · #**227** (**permalink**) 06/09/2005, 01:57

P. Cómo contar el número de palabras que se van escribiendo en un textarea?
R. Por medio de este código, en el que además se puede determinar la cantidad mínima de caracteres que ha de tener una palabra para ser contabilizada.

Código PHP:

  <html>

<head>

    <title>Untitled</title>

    <style>

    textarea{

    overflow:auto;

    text-align:justify;

    }

    input{text-align:right;}

    

    input,textarea{

    border:solid 1px black;

    font:normal 10px/15px verdana;

    color:navy;

    }

    </style>

    <script>

//  Contador de palabras

//  Script de Karlankas para forosdelweb.com

//  http://www.karlankas.net    

    minimoLetras=3;//Cuantas letras tiene que tener como mínimo la palabra para ser contabilizada

    function contar(esto){

    if(esto.value.charAt(esto.value.length-1)==" "){

    numeroDePalabras=0;

    textos=esto.value;

    palabras=textos.split(" ");

    for(a=0;a<palabras.length;a++){

    if(palabras[a].length>=minimoLetras){

    numeroDePalabras+=1;

    }

    }

    document.forms['pepe']['palabras'].value=numeroDePalabras;

    }

    }

    </script>

</head>

 
<body>

<form name="pepe">

<textarea onkeyup="contar(this)" cols="50" rows="10" name="texto" id="texto"></textarea> <input type="text" name="palabras" id="palabras" size="3" maxlength="3" readonly>

</form>

 
 
</body>

</html>

Un saludo!

KarlanKas · #**228** (**permalink**) 09/09/2005, 05:06

P: ¿Cómo añadir desde un textbox una opción a un select y como borrar una opción del select con un botón?
R: Con este código:

Código PHP:

  <html>

<head>

<title>Untitled</title>

<script>

 
//Script hecho por Karlankas para las FAQ de forosdelweb.com

 
function mandarlo(){

    

    formulario=document.forms['estacosa'];

    ultimaOpcion=formulario['cosas'].options.length;

    texto=formulario['palabras'].value;

    valor=formulario['palabras'].value;

    

    if(texto!=""){

        nuevaOpcion=new Option(texto,valor);

        formulario['cosas'].options[ultimaOpcion]=nuevaOpcion;

        formulario['palabras'].value="";

        formulario['cosas'][0].text="Opcion Añadida";

        opcionElegida=formulario['cosas'].selectedIndex=0;

        setTimeout('formulario["cosas"][0].text="Elige una opción";',800);

        

    }

}

 
function borrar(){

    formulario=document.forms['estacosa'];

    if(formulario['cosas'].selectedIndex>0){

        opcionElegida=formulario['cosas'].selectedIndex;

        formulario['cosas'].options[opcionElegida]=null;

        formulario['cosas'][0].text="Opcion Borrada";

        opcionElegida=formulario['cosas'].selectedIndex=0;

        setTimeout('formulario["cosas"][0].text=(formulario["cosas"].options.length>1)?"Elige una opción":"No hay opciones";',800);

        

    }

}

</script>

<style>

*{font:normal 10px/10px verdana;}

input{

border:ridge 2px;

}

</style>

</head>

 
<body>

<form action="" id="estacosa" name="estacosa">

    <input type="text" name="palabras" id="palabras" />

    <input type="button" name="mandar" id="mandar" value="->" onclick="mandarlo()" onclick="mandarlo()" />

    <select style="width:150px;" id="cosas" name="cosas" size="1">

        <option>No hay opciones</option>

    </select>

    <input type="button" style="color:red;font:bold 10px verdana" value="X" onclick="borrar()" />

</form>

 
 
</body>

</html>

En la function mandarlo hay 2 variables que son texto y valor, las distingo por si se quiere añadir algo al texto introducido en el valor de la opción. También se podría hacer otro textbox para introducir el valor.

Un saludo!

programeitor · #**229** (**permalink**) 11/09/2005, 17:02

.

Esta funcion sirve para aplicar estilo a una clase de 'tags' que tenga varios tipo ,como es el caso de <input> ,type=text, type=radio, etc...

function EstiloPorTipo(marca,tipo,estilo){// programeitor
var e=estilo.split(',');
var m=document.getElementsByTagName(marca);
for(var n=0;n<m.length;n++){
if(m[n].type==tipo){
for(var i=0;i<e.length;i+=2){
m[n].style[e[i]]=e[i+1];
}
}
}
}

La llamada se realiza de esta forma una vez cargada la pagina:

EstiloPorTipo('input','radio','background,green,width,50px,height,50px')

Como se puede apreciar se pueden pasar varios conceptos a la vez, separados por comas.

.

JavierB · #**230** (**permalink**) 24/09/2005, 03:21

P.- ¿Como puede recorrer los elementos de un formulario pulsando la tecla Enter en lugar de usar el tabulador?

R.- Usando este código:

Código PHP:

  <html>

<head>

<script>

function tabular(e,obj) {

  tecla=(document.all) ? e.keyCode : e.which;

  if(tecla!=13) return;

  frm=obj.form;

  for(i=0;i<frm.elements.length;i++)

    if(frm.elements[i]==obj) {

      if (i==frm.elements.length-1) i=-1;

      break }

  frm.elements[i+1].focus();

  return false;

}

</script>

</head>

<body>

<form>

<input type="text" onkeypress="return tabular(event,this)" />

<input type="text" onkeypress="return tabular(event,this)" />

</form>

</body>

</html>

JavierB · #**231** (**permalink**) 06/10/2005, 09:26

P.- ¿Como puedo validar que lo que teclea un usuario son solo letras, solo números o no son números?

R.- Con estas pocas líneas de código:

Código PHP:

  <html>

<head>

<script type="text/javascript">

function validar(e) {

    tecla = (document.all) ? e.keyCode : e.which;

    if (tecla==8) return true; //Tecla de retroceso (para poder borrar)

    // dejar la línea de patron que se necesite y borrar el resto

    patron =/[A-Za-z]/; // Solo acepta letras

    //patron = /\d/; // Solo acepta números

    //patron = /\w/; // Acepta números y letras

    //patron = /\D/; // No acepta números

    //

    te = String.fromCharCode(tecla);

    return patron.test(te); 

} 

</script>

</head>

 
<body>

<input type="text" name="textfield" onkeypress="return validar(event)">

</body>

</html>

Saruman · #**232** (**permalink**) 06/10/2005, 12:24

P. - ¿Cómo agregar la hora en formato de 12 horas (AM y PM) en cualquier parte de nuestro sitio?

R. -

Función JS

Código HTML:

<script>
function actualizaReloj(){ 
 marcacion = new Date();
 Hora = marcacion.getHours();
 Minutos = marcacion.getMinutes();
 Segundos = marcacion.getSeconds();
 
 if (Hora >= 12) {
  var Horario = "P.M."
 } else {
  var Horario = "A.M."
 }
 
 switch (Hora) {
  case 0:
   Hora = 12;
   break;
  case 13:
   Hora = 1;
   break;
  case 14:
   Hora = 2;
   break;
  case 15:
   Hora = 3;
   break;
  case 16:
   Hora = 4;
   break;
  case 17:
   Hora = 5;
   break;
  case 18:
   Hora = 6;
   break;
  case 19:
   Hora = 7;
   break;
  case 20:
   Hora = 8;
   break;
  case 21:
   Hora = 9;
   break;
  case 22:
   Hora = 10;
   break;
  case 23:
   Hora = 11;
   break;
 }
 
 if (Hora<=9) 
 Hora = "0" + Hora;
 
 if (Minutos<=9) 
 Minutos = "0" + Minutos;
 
 if (Segundos<=9) 
 Segundos = "0" + Segundos ;
 
 var Script = Hora + ":" + Minutos + " " + Horario;
 
 document.getElementById('Reloj').innerHTML = Script;
 setTimeout("actualizaReloj()",1000) 
} 
</script>

en el HTML:

Código HTML:

<table width="100%" height="24" align="center" border="0" cellspacing="0" cellpadding="0" style="color:#000000;">
  <tr>
    <td id="Reloj" style="font-weight:bold;"><script language="javascript">actualizaReloj()</script></td>
  </tr>
</table>

Enjoy!

Saruman · #**233** (**permalink**) 07/10/2005, 09:44

P. - ¿Cómo quito o remuevo un link?

R. - Utilizando la siguiente función:

Código PHP:

  function QuitarLink(my_link) {

  var mylink = document.getElementById(my_link);

  if (mylink) {

   if (mylink.hasChildNodes()) {

    for(var i=0;i<mylink.childNodes.length;i++)

     mylink.parentNode.insertBefore(mylink.childNodes[i].cloneNode(true),mylink);

    mylink.parentNode.removeChild(mylink);

   }

  }

 }

Utilización:

Código HTML:

<a id="id_link" href=http://www.forosdelweb.com target="_blank"><img src="mi_imagen.gif" width="100" height="100"></a>
<input type="button" value="Quitar Link" onClick="QuitarLink('id_link')">

Cheers!!

el_javi · #**234** (**permalink**) 17/10/2005, 03:45

P.- ¿Como puedo poner sobre elementos SELECT, TEXTAREA de un formulario una capa, a estilo Tooltip?

R.- Tras varios días de estudio, he llegado a la forma de conseguirlo.

Poder poner una capa sobre un formulario, y que en IE, NO SE OCULTE TRAS LOS ELEMENTOS SELECT Y TEXTAREA.

Bueno, pues hay una manera de solucionarlo.

Quizás, no sea la manera más profesional pero por el momento, es la que mejor sirve para salir del paso.

Os comento la lógica, y después paso el código:

Como el problema es que la capa (DIV) se pasa a segundo plano, detras del SELECT o TEXTAREA, pues hay que encontrar un OBJETO que SI quede por encima de dichos elementos.

¿Y si usamos un IFRAME, que esté continuamente detras de la capa, y que el iframe este sin bordes, e invisible?
Pues es la mejor solución que hasta el momento e encontrado.

Si, un IFRAME, detras siempre de la capa, para que haga de TAPADERA sobre el SELECT o TEXTAREA.

A continuación os pongo el código:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Capa sobre Formulario</title>
	<style type="text/css">
		.sp{font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 1px;text-decoration:none;color: #EFEFEF;line-height:1px}
	</style>
	<script language="JavaScript1.2" type="text/javascript">

		// Función encargada de desplazar la capa por el documento
		function desplazar_capa(evt)
		{
			// Capturamos el Evento
			var e = (window.event) ? window.event : evt;
			
			// Instanciamos los dos objetos
			var capa = document.getElementById("capa");
			var obj_iframe_oculto = document.getElementById("iframe_oculto");
			
			// Determinamos las coordenadas del raton.
			X = e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
			Y = e.clientY + document.documentElement.scrollTop + document.body.scrollTop;
	
			// Mostramos las coordenadas del raton por pantalla
			document.getElementById("info").innerHTML = "X= " + X + "  Y = " + Y;
			
			
			// Movemos la capa a las coordenadas del raton
			capa.style.left = X + 10;
			capa.style.top = Y + 25;
			
			// Ponemos a nuestra capa una opacidad para que sea algo transparente y se vea el contenido del fondo
			capa.style.filter="alpha(opacity=85)"; // Opacidad para IE
			capa.style.opacity="0.85"; // Ocapacidad para Netscape

			// Quitamos al Iframe TODA la opacidad para que sea totalmente transparente y se vea el fondo
			obj_iframe_oculto.style.filter="alpha(opacity=0)"; // Opacidad para IE
			obj_iframe_oculto.style.opacity="0.00"; // Ocapacidad para Netscape

			// Hacemos que la capa sea totalmente visible
			capa.style.display = "block";
			// Definimos el ancho del IFRAME igual que el ancho de la capa, para que no se le vea
			obj_iframe_oculto.style.width = capa.offsetWidth;
			obj_iframe_oculto.style.height = capa.offsetHeight;
			// Posicionamos el IFRAME en la misma posición que la capa (para que esté siempre detras)
			obj_iframe_oculto.style.top = capa.style.top;
			obj_iframe_oculto.style.left = capa.style.left;
			// Bajamos de Z-index el IFRAME, para que esté debajo de la capa
			obj_iframe_oculto.style.zIndex = capa.style.zIndex - 1;

			// Definimos que el contenido del IFRAME esté VISIBLE
			obj_iframe_oculto.style.display = "block"; // ESTA ES LA LINEA MAS IMPORTANTE
		}
	</script>
</head>
<body style="margin:0px" onmousemove="desplazar_capa(event);">
<table cellpadding="0" cellspacing="0" style="width:100%;height:100%" border="0">
	<tr>
		<td width="100%" height="100%" class="sp" align="center" valign="middle">
			<form action="javascript:void(null)">
			<table cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="150" height="25" align="left" valign="top">Select Multiple</td>
					<td width="150" align="left" valign="top">Select Normal</td>
					<td width="150" align="left" valign="top">Textarea</td>
					<td width="150" align="center" valign="top">Boton</td>
					<td width="150" align="left" valign="top">Checkbox</td>
					<td width="150" align="left" valign="top">Radiobutton</td>
				</tr>
				<tr>
					<td colspan="6" width="100%" height="1" bgcolor="#000000" class="sp">&nbsp;</td>
				</tr>
				<tr>
					<td colspan="6" width="100%" height="20" class="sp">&nbsp;</td>
				</tr>
				<tr>
					<td width="150" align="left" valign="top"><select multiple><option>Elemento Select</option></select></td>
					<td width="150" align="left" valign="top"><select><option>Elemento Select</option></select></td>
					<td width="150" align="left" valign="top"><textarea style="width:150px;height:150px"></textarea></td>
					<td width="150" align="center" valign="top"><input type="Button" value="Boton"></td>
					<td width="150" align="left" valign="top"><input type="Checkbox" value="Checkbox"></td>
					<td width="150" align="left" valign="top"><input type="Radio" value="Radiobutton"></td>
				</tr>
				<tr>
					<td colspan="6" width="100%" height="20" class="sp">&nbsp;</td>
				</tr>
				<tr>
					<td colspan="6" id="info" align="center"></td>
				</tr>
			</table>
			</form>
		</td>
	</tr>
</table>
<div id="capa" style="position:absolute; top:25px; left:50px; width:100px; height:40px padding:4px; display:none; background-color:#7598DE; color:#ffffff; z-index:100;">Esta es nuestra capa en la que tenemos el texto.<br><br>¿Se ocultará tras el SELECT?</div>

<iframe id="iframe_oculto" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"></iframe>

</body>
</html>

Espero que esto os sea de ayuda... y si hay algún comentario, hacermelo saber, que para eso estamos.. para seguir aprendiendo.

Un saludo

ludovico2000 · #**235** (**permalink**) 30/12/2005, 11:00

P.- ¿Cómo puedo hacer que PAREZCA que un select se despliega solo cuando paso el ratón por encima?

R.-Con estas funciones que primero, le dan el foco, y luego cambian el size de "lo que haya" a "1":

Código:

<html>
<head>
</head>
<script>
function abrir(meabro){
meabro.focus();
meabro.size = meabro.options.length;
}
</script>

<script>
function cerrar(mecierro){
mecierro.focus();
mecierro.size = "1";
}
</script>
<body>
<form method="POST" action="loquesea.php">
  <p>&nbsp;</p>
  <p><select style="readonly" name="selectuno" onmouseover="abrir(selectuno)" onmouseout="cerrar(selectuno)">
    <option value="uno" selected>uno</option>
    <option value="dos">dos</option>
    <option value="tres">tres</option>
  </select></p>
  <p><input type="submit" value="Enviar" name="1"><input type="reset" value="Restablecer" name="B2"></p>
</form>
</body>
</html>

Callaghan · #**236** (**permalink**) 24/02/2006, 19:28

P:¿Como puedo hacer un selector de fecha basado en tags <select> que permita seleccionar cualquier fecha válida hasta el día de hoy?

R:

Esta es una modificacion sobre el ejemplo 111 de Kaopectate.
Me ha sido muy util ese ejemplo y le he hecho unas modificaciones que creo que lo hacen mejor.

-Con el codigo del FAQ 111, debes seleccionar primero el año, luego el mes y finalmente el dia. Cuando cambias el año, los campos mes y dia se resetean y cuando cambias el mes, el campo dia se resetea.
En la modificacion esto ya no ocurre puedes seleccionar las caracteristicas en el orden que quieras y si cambias una el resto no se resetean.
La unica restriccion es que por ejemplo tengas elegido como dia el 31 de Enero y cambies en el campo "mes" Enero por Abril, en este caso te seleccionaria el ultimo dia disponible, osea el 30 de abril.

Código PHP:

  <?php BEGIN__VBULLETIN__CODE__SNIPPET <html>
 <head>
  <script language="JavaScript">

   var aMeses = new Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre")

function padNmb(nStr, nLen, sChr){
    var sRes = String(nStr);
    for (var i = 0; i < nLen - String(nStr).length; i++)
     sRes = sChr + sRes;
    return sRes;
   }

function makeDateFormat(nDay, nMonth, nYear){
    var sRes;
    sRes = padNmb(nDay, 2, "0") + "/" + padNmb(nMonth, 2, "0") + "/" + padNmb(nYear, 4, "0");
     return sRes;
   }
   
function addOpt(oCntrl, iPos, sTxt, sVal){
    var selOpcion = new Option(sTxt, sVal);
    oCntrl.options.add(selOpcion, iPos);
   }

function lastDayOfMonth(nMonth, nYear){
    var aMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
    if ((nMonth == 2) && (nYear % 4 == 0))
     return 29;
    else
     return aMonth[nMonth - 1];
   }

function cambia(nCambiado){
    var nAno;
    var nMes;
    with (document.frm){     
     nAno = parseInt(ano.options[ano.selectedIndex].value);
     switch (nCambiado){
      case 0:
       llenaMes(mes, nAno);
       nMes = parseInt(mes.options[mes.selectedIndex].value);
       nDia = parseInt(dia.options[dia.selectedIndex].value);
       res.value = makeDateFormat(nDia, nMes + 1, nAno);  
       break;
      case 1:
       nMes = parseInt(mes.options[mes.selectedIndex].value);
       llenaDia(dia, nAno, nMes);
       nDia = parseInt(dia.options[dia.selectedIndex].value);
       res.value = makeDateFormat(nDia, nMes + 1, nAno);
       break;
      case 2:
       nMes = parseInt(mes.options[mes.selectedIndex].value);
       nDia = parseInt(dia.options[dia.selectedIndex].value);
       res.value = makeDateFormat(nDia, nMes + 1, nAno);
       break;
      case 3:
          llenaMes(mes, nAno);
      break;
     }
    }
   }

function llenaAno(oAno){
      var hoy = new Date();
    var ini = 1960;
       for (var i = ini; i <= hoy.getYear(); i++)
     addOpt(oAno, i - ini, String(i), String(i));
     oAno.options[i-ini-1].selected = true;
     cambia(3);
}

function llenaMes(oMes, nAno){
    var hoy = new Date();
    var sel=0;
    if(oMes.selectedIndex >=0) var sel=oMes.selectedIndex;
    var nFin = 11;
    while (oMes.length > 0) oMes.remove(0);
    if (nAno == hoy.getYear()) 
    {
    nFin = hoy.getMonth();
    } 
    if (sel>nFin)
        {
            sel=nFin-1;
        }  
    for (var i = 0; i <= nFin; i++)
     addOpt(oMes, i, aMeses[i], String(i));
     oMes.options[sel].selected = true;
     cambia(1);
   }

function llenaDia(oDia, nAno, nMes){
    var hoy = new Date();
    var sel=0;
    if(oDia.selectedIndex >=0) var sel=oDia.selectedIndex;
    var nFin = lastDayOfMonth(nMes + 1, nAno);
    while (oDia.length > 0) oDia.remove(0);
     if (nAno == hoy.getYear() && nMes == hoy.getMonth()) 
    {
    nFin = hoy.getDate();
    }
    if(sel>nFin)
        {
            sel=nFin-1;
        }
    for (var i = 1; i <= nFin; i++)
     addOpt(oDia, i, String(i), String(i));
        oDia.options[sel].selected = true;
   }

  </script>
 </head>
 <body onload=" llenaAno(document.frm.ano)">
  <form name="frm">
   <table border="0">
    <tr>
     <td align="right">
      Año: 
     </td>
     <td>
      <select name="ano" onchange="cambia(0)" style="width: 80">
      </select>
     </td>
    </tr>
    <tr>
     <td align="right">
      Mes: 
     </td>
     <td>
      <select name="mes" onchange="cambia(1)" style="width: 80">
      </select>
     </td>
    </tr>
    <tr>
     <td align="right">
      Día: 
     </td>
     <td>
      <select name="dia" onchange="cambia(2)" style="width: 80">
      </select>
     </td>
    </tr>
    <tr>
     <td align="right">
      Fecha:
     </td>
     <td>
      <input type="text" name="res" disabled>
     </td>
    </tr>
   </table>
  </form>
 </body>
</html>

bertoski · #**237** (**permalink**) 21/06/2006, 22:34

P: ¿Como puedo hacer que los links de mi menu cambien de color cuando se les pase el puntero por encima?

R: Estas funciones logran que cuando se pase el puntero por encima de los links cambien de color, cuando se hace un click sobre uno cambie a un tercer color solo por un momento para resaltar el click y que el ultimo que ah sido clickeado quede como "activo" (el color queda fijado sobre el) hasta que se haga click en otro y el otro quede como "activo", ademas si hay uno "activo" y se pasa el puntero sobre otro link pasa a estar como "inactivo" mientras se mantenga el puntero sobre otro link, si no se hace click sobre ningun otro vuelve a estar "activo" una vez que el puntero no esta sobre ningun otro link.

Head:

Código:

function configurarcolor(colorcambio,colorclick,inicial){
if(inicial == "no"){
    nombrem = "";
}else{
    nombrem = inicial;
}
coloran = "";
colorca = colorcambio;
colorc = colorclick;
}
 
function cambiarcolor(nombre, mantener){
font = document.getElementById(nombre);
if(nombre != nombrem){
    if(coloran == ""){
    coloran = font.style.color;
    }
    if(mantener != "mantener"){
        if(nombrem == ""){
            if(font.style.color == coloran){
                font.style.color = colorca;
            }else{
                font.style.color = coloran;
            }    
        }else{
            fontm = document.getElementById(nombrem);
            if(font.style.color == coloran){
                fontm.style.color = coloran;
                font.style.color = colorca;
            }else{
                fontm.style.color = colorca;
                font.style.color = coloran;
            }            
        }
    }else{
        nombrem = nombre;
    }
}else{
fontm = document.getElementById(nombrem);
fontm.style.color = colorca;
}
}
 
function colorclick(nombre){
font = document.getElementById(nombre);
if(font.style.color == colorca){
font.style.color = colorc;
}else{
font.style.color = colorca;
}
}

Body:
colordecambio es el color que van a tener los links cuando se pasa el puntero sobre ellos, colorenclick es el color "momentaneo" que tienen cuando se les hace click y idlink es opcional, sirve para tener uno como "activo" cuando se carga la pagina.

Código:

<body onLoad='configurarcolor("colordecambio","colorenclick","idlink");'>

Links:
Los links deben llevar el color de "desactivado" en style="color:#color", si se eligio un link para que aparezca como activo se debe usar en el link que se eligio el "colordecambio" que se declaro en body.

Código:

<a id="ejemplo" style="color:#FFFFFF;" onMouseOver="cambiarcolor('ejemplo');" onMouseOut="cambiarcolor('ejemplo');" onClick="cambiarcolor('ejemplo','mantener');" onMouseDown="colorclick('ejemplo');" onMouseUp="colorclick('ejemplo');" href="ejemplo.html">Ejemplo</a>

Para sacar el Pre-Formato que tienen los links se puede usar esto, debe ir en head:

Código:

<style type="text/css">
A{
text-decoration: none;
}
</style>

Espero que sea de utilidad, si tienen algun comentario o pueden mejorar el codigo haganmelo saber.Suerte.

Berto.

MasLibertad · #**238** (**permalink**) 10/07/2006, 04:08

P: ¿Cómo comprobar una dirección de mail?

R:

He visto varias funciones usadas para comprobar e-mail y quisiera participar en el foro con la función que yo uso para ello.

Este es mi primer mensaje, por lo que pido perdón de antemano si no soy capaz de mostrarlo correctamente.

Código:

function CompruebaMail(Campo)
{
   if (Campo.value == '') return false;
   Campo.value = Campo.value.toLowerCase();
   Campo.value = Campo.value.replace(/ /g, "");
   if (/\.\.|\.@|@\.|^\.|\.$/.test(Campo.value))
      return false;
   if (/\.([a-z]{2,3}|info|name|museum)$/.test(Campo.value))
      if (/^[_\.0-9a-z-]+@([0-9a-z-]+\.)+[a-z]*$/.test(Campo.value))
         return true;
   return false;
}

y ahora paso a explicar la función:
En primer lugar compruebo que el campo a verificar está vacío, en cuyo caso termina devolviendo FALSE
A continuación convierto el campo en minúsculas y le elimino todos los espacios.
Uso la función .test(), que sólo he visto documentada en MSDN y que permite comprobar máscaras de "Expresiones Regulares", es decir, comprobar si una cadena se ajusta a un formato determinado usando un lenguaje estándar que puede ser usado en numerosos lenguajes de programación. (JavaScript y PHP entre otros)
La sintaxis de la comprobación en javascript sería

Código:

if (/ExpresiónRegular/.test(VariableAComprobar))

y devolvería true si en la VariableAComprobar se encuentra un trozo que se ajuste al formato de la ExpresiónRegular.
En PHP se usaría

Código PHP:

  if (ereg($ExpresionRegular, $VariableAComprobar))

La primera ExpresionRegular es "\.\.|\.@|@\.|^\.|\.$" y comprueba si la VariableAComprobar contiene ".." ó ".@" ó "@." ó no contiene ningún "." ó hay un punto al final de la Variable. Si ocurre cualquiera de estas cosas, la dirección se considera incorrecta y retorna FALSE.
La segunda ExpresiónRegular es "\.([a-z]{2,3}|info|name|museum)$" y comprueba el final de la VariableAComprobar. Si encuentra un "." seguido de una cadena de sólo letras, de dos o tres caracteres (lo que incluye todas las terminaciones de países y terminaciones "com", "net", "etc"), ó "info" ó "name" ó "museum" SEGUIDOS del final de la cadena, se considera que el mail, provisionalmente sigue siendo válido y podemos hacer la última comprobación.
La tercera ExpresionRegular es "^[_\.0-9a-z-]+@([0-9a-z-]+\.)+[a-z]*$" y comprueba que desde el inicio de la cadena ("^") haya un tramo de caracteres que solo incluyan "_", ".", números, letras ó "-", seguido de "@" y uno o varios tramos de Letras, Numeros o "-" seguidos de un punto, y termine en una cadena de letras seguida de Fin de Cadena ("$"). En caso de que la máscara sea correcta, significará que la dirección de email es muy probable que sea válida.
Si quisiéramos hacer una comprobación completa tendríamos que hacer que la segunda condición incluyera TODAS las terminaciones de dominio ("es", "uk", "mx", "cl", "com", "net", y muchos etcéteras), con lo que lo que se ganaría en seguridad se perdería bastante en velocidad de proceso y claridad del programa, por lo que no lo recomiendo.

Es muy fácil incluir una rutina de Comprobación de Formularios
El botón Submit debe incluir la función "onClick()" de la siguiente forma

Código:

<input type=submit value=Aceptar name=Boton onClick="return CompruebaForm();"/>

y en nuestro script de JavaScript añadir las funciones CompruebaMail (ya escrita) y

Código:

function CompruebaForm()
{  
   if (document.Form1.Mail.value == '')
   {
      alert('Debe rellenar el campo e-Mail');
      document.Form1.Mail.focus();
      return false;
   }
   if (!CompruebaMail(document.Form1.Mail))
   {
      alert('La dirección de e-mail no es válida');
      document.Form1.Mail.focus();
      return false;
   }
   return true;
}

Con todo ello, podemos incluir la solicitud de e-mail en cualquier formulario y nos aseguramos, primero de que se rellene el campo de Mail, y segundo, que el mail introducido es correcto.

Para terminar, hay forofos de la programación que intentan hacer en una sola expresión regular TODAS las comprobaciones. Se puede hacer, pero la expresión regular es tan larga y compleja que, a mí personalmente, no me compensa, pero si alguien quiere intentarlo, adelante.

Espero que esto os sirva.

urgido · #**239** (**permalink**) 23/07/2006, 05:49

P: CREAR UNA IMÁGEN DE VERIFICACIÓN
R: NAVEGANDO ME ENCONTRE CON ESTE SCRIPT, LO CAMPRTO CON UDS.

http://www.archreality.com/jcap/

CRÉDITOS: Jonathan Feaster
NOTA: LA WEB ESTA EN INGLÉS PERO CREANLO VALE LA PENA :)

urgido · #**240** (**permalink**) 09/10/2006, 23:40

P: Agrandar / Disminuir texto de una página
R: Función realmente efectiva para personas que les gusta cambiar el estilo de la fuente a la página sin necesidad de mover funciones al navegador.

Código PHP:

  // Tags a las cuales se les va a aplicar el script:
var tgs = new Array( 'div','td','tr','span','p');

// Intervalos de las fuentes, en este caso de menor-mayor:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;

function ts( trgt,inc ) {
    if (!document.getElementById) return
    var d = document,cEl = null,sz = startSz,i,j,cTags;
    
    sz += inc;
    if ( sz < 0 ) sz = 0;
    if ( sz > 6 ) sz = 6;
    startSz = sz;
        
    if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

    cEl.style.fontSize = szs[ sz ];

    for ( i = 0 ; i < tgs.length ; i++ ) {
        cTags = cEl.getElementsByTagName( tgs[ i ] );
        for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
    }
}

Link para poner en tu web(de preferencia en el top de tu página):

Código HTML:

<a href="javascript:ts('body',1)">Agrandar Texto</a> | <a
href="javascript:ts('body',-1)">Disminuir Texto</a>