Archivo

Borrar y rellenar el contenido de un div con DOM

agosto 6th, 2009 by Webmaster

Cuando utilizamos javascript para modificar contenido en una página, tenemos varias opciones. Una de ellas es innerHTML.

Esta opción seria maravillosa, porque permite añadir contenido a un div de forma muy simple, ademas permite añadir código html que sera interpretado como tal.

El inconveniente de innerHTML es que no es una función estándar, es decir, esta no se especifica en el estándar de javascript (ECMA-262).

La otra opción es utilizar DOM, de esta forma respetamos el estándar. Por desgracia utilizar DOM es algo mas complicado que innerHTML.

Para solucionar el problema mencionado al principio, manejar contenido con javascript, he creado varias funciones que nos facilitan este trabajo.

Una de ellas se encarga de eliminar todo el contenido de un div y la otra de escribir un texto ( sin código HTML ).

Podéis ver un ejemplo real aquí.

Funciones:

        //Eliminar el contenido de un div
        function limpiarDiv(id)
        {
            var div;
 
                div = document.getElementById(id);
 
                while(div.hasChildNodes())
                {
                    div.removeChild(div.lastChild);
                }
        }
 
        //Escribir en un div
        function rellenarDiv(id, texto)
        {
            var div;
            var nodoTexto;
 
              div = document.getElementById(id);
 
              nodoTexto = document.createTextNode(texto);
 
              //Llamamos a la función limpiarDiv para eliminar el contenido
              //actual del div.
              limpiarDiv(id);
 
              div.appendChild(nodoTexto);
        }

Etiquetas: , , ,

Contar caracteres de un campo con JavaScript

marzo 25th, 2009 by admin

Con el fin de hacer las cosas mas fáciles y entendibles al usuario he trabajado un poco la interactividad que tienen estos con los formularios.

Al principio no le prestaba mucha atención a este tema. Simplemente creaba un campo con su correspondiente etiqueta descriptiva y ya esta.

Ahora para ayudar al usuario a rellenar los campos adecuadamente y evitar posibles errores, utilizo una función que indica cuando se paso el número máximo de caracteres, cuantos lleva escritos y añadir un máximo de caracteres permitidos.

Esto también da un mayor atractivo al formulario.


Ejemplo real

Ejemplo de uso:

<!-- incluir fichero con la funcion en JavaScript -->
<script src="./contarCaracteres.js" type="text/JavaScript"></script>
 
<!--
Campo al que contaremos los caracteres 
 
* Llamamos a la función con el evento "onKeyDown".
* Le pasamos como parametros:
	- el id del campo (this.id)
	- el id del div donde se mostrara el nº de caracteres actuales
	- el color que tendra el campo en caso de sobrepasar el máximo de caracteres
	- el máximo de caracteres permitidos.
 
-->
<input id="ejemplo" onkeydown="contarCaracteres(this.id, 'nCaracteres','#FF0000',10)" type="text" />
 
<!-- div donde mostraremos el numero de caracteres -->
Caracteres:<div id='nCaracteres'></div>

Función:

function contarCaracteres(campo, id,color,maximo)
{
	/**
	 * variable que contiene el div donde vamos a
	 * escribir y borrar.
	 */
	var div;
 
	/**
	 * variable que guardara el numero total de
	 * caracteres que tiene el campo que estamos
	 * contando.
	 */
	var cTotal;
 
	/**
	 * variable que creara el nodo de texto y el valor
	 * que mostraremos.
	 */
	var tmp;
 
	//Asignar div al div con el que trabajaremos
	div = document.getElementById(id);
 
	//Borrar el contenido del div
	while(div.hasChildNodes())
	{
		div.removeChild(div.lastChild);
	}
 
	//Obtener el número de caracteres del campo en cTotal.
	campo = document.getElementById(campo);
	cTotal = campo.value.length + 1;
 
	/**
	 * Añadirle el atributo maxlenght para evitar que se escriban
	 * mas caracteres de los indicados.
	 */
	campo.setAttribute("maxlength",maximo);
 
	/**
	 * Si se supera el máximo de caracteres permitidos ponemos el fondo
	 * del campo en rojo ó el color indicado.
	 */
	if(cTotal &gt; maximo  ) {
		campo.style.backgroundColor = color;
	}  else {
		campo.style.backgroundColor = "#FFFFFF";
	}
 
	/**
	 * Escribimos el total de caracteres en el div indicado.
	 * Para hacer esto creamos un nodo de texto con el valor de
	 * cTotal. El nodo lo asignamos a tmp
	 */
	tmp = document.createTextNode(cTotal);
 
	//Añadimos el contenido de tmp al div indicado.
	div.appendChild(tmp);
}

Etiquetas: , ,