Foros del Web » Programando para Internet » Javascript »

textarea extensible en IE

Estas en el tema de textarea extensible en IE en el foro de Javascript en Foros del Web. Hola: ¿Sabeis porque esto funciona perfectamente en IE y no en firefox? Es increible sin ningún códido puedes personalizar tu textarea..... PONGO LA FUNCION setlimit ...
  #1 (permalink)  
Antiguo 10/10/2009, 03:15
 
Fecha de Ingreso: enero-2008
Mensajes: 303
Antigüedad: 16 años, 3 meses
Puntos: 0
textarea extensible en IE

Hola:
¿Sabeis porque esto funciona perfectamente en IE y no en firefox?
Es increible sin ningún códido puedes personalizar tu textarea.....

PONGO LA FUNCION setlimit para evitar que salga el error java en IE, pereo sin la funcion tambien funciona perfectamente.

Código:
<textarea name="textarea1" cols="90" rows="3" class="input" id="textarea1" style="overflow:visible"onKeyUp="setlimit(this.value)"></textarea>

<script type="text/javascript">
function setlimit(obj) {
}
 </script>
  #2 (permalink)  
Antiguo 10/10/2009, 04:55
Avatar de josec89  
Fecha de Ingreso: octubre-2009
Mensajes: 12
Antigüedad: 14 años, 7 meses
Puntos: 0
Respuesta: textarea extensible en IE

Hola!

Es que - en general - IE hace lo que le da la gana... en este caso concreto tiene una respuesta bastante sencilla:

Hay diversas formas de captar los eventos:
La primera es acoplar la función en la etiqueta HTML (no es muy eficiente en problemas complejos)
<textarea .... onkeyup=función></textearea>

La segunda es localizar el objeto al que queremos añadirle un evento y asignarle a su variable - de nombre = "on" + evento - el nombre de la función que queramos.

window.onload = función
..

document.getElementById("textarea1").onkeydown = función;

Pero estos son los métodos menos eficientes, ya que sólo permiten una función por elemento y además hay incompatibilidad entre navegadores.

El último tipo es EventListener / attachEvent: son funciones que añaden a un evento una función. Te recomiendo usar este código para los eventos a partir de ahora :


Código HTML:
var EH = new Object();


EH.addEventHandler = function(elemento, tipoEvento, func)
{
	if(elemento.addEventListener) // Navegadores DOM
	{
		elemento.addEventListener(tipoEvento, func, false);
	}
	else if(elemento.attachEvent) // Internet Explorer
	{
		elemento.attachEvent("on" + tipoEvento, func);
	}
	else // Resto de navegadores
	{
		elemento["on" + tipoEvento] = func;
	}
}

EH.removeEventHandler = function(elemento, tipoEvento, func)
{
	if(elemento.addEventListener) // Navegadores DOM
	{
		elemento.removeEventListener(tipoEvento, func, false);
	}
	else if(elemento.attachEvent) // Internet Explorer
	{
		elemento.detachEvent("on" + tipoEvento, func);
	}
	else // Resto de navegadores
	{
		elemento["on" + tipoEvento] = null;
	}
}

EH.getEvent = function()
{
	if(window.event) // Internet Explorer
		return this.formatEvent(window.event);
	else	// Navegadores DOM
		return EH.getEvent.caller.arguments[0];
}


EH.formatEvent = function(event)
{
	var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;

	if(isIE)
	{
		event.charCode = (event.type == "keypress") ? event.keyCode : 0;
		event.eventPhase = 2;
		event.isChar = (event.charCode > 0);
		event.pageX = event.clientX + document.body.scrollLeft;
		event.pageY = event.clientY + document.body.scrollTop;

		event.preventDefault = function()
		{
			this.retunValue = false;
		}

		if(event.type == "mouseout")
		{
			event.relatedTarget = event.toElement;
		}
		else if(event.type == "mouseover")
		{
			event.relatedTarget = event.fromElement;
		}

		event.stopPropagation = function()
		{
			this.cancelBuble = true;
		}

		event.target = event.srcElement;

		event.time = (new Date).getTime();
	}

	return event;
}
Este código reconoce el navegador que usas (más o menos) y añade un evento, para tu ejemplo de textarea, quedaría:
Código HTML:
<textarea name="textarea1" cols="90" rows="3" id="textarea1" style="overflow:visible"></textarea>
<textarea id="textarea2" cols="90" rows="1"></textarea>

<script type="text/javascript">

EH.addEventHandler(document.getElementById("textarea1"), "keydown", setlimit);

function setlimit(ev) 
{
	var event = EH.getEvent();

	var str = "Capturando un evento de [" + event.target.getAttribute("id") + "] value = " + event.target.value;
	document.getElementById("textarea2").value = str;
}


</script> 
Claro que en este código tienes que añadir las funciones de EH que te he puesto antes (que también es JAVASCRIPT!).
Fíjate bien, que para tener la variable de evento tienes que hacer un EH.getEvent(), porque sino, el parámetro ev que le pasamos a la función sólo funciona en navegadores DOM (firefox, chrome, etc).

Este código funciona correctamente en los navegadores actuales más utilizados :)

Espero que te sirva de ayuda, un saludo ^^
  #3 (permalink)  
Antiguo 10/10/2009, 04:59
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 4 meses
Puntos: 126
Respuesta: textarea extensible en IE

¿Que se supone que hace bien un navegador y otro no?

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:23.