textarea extensible en IE

[josec89]

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 ^^