textarea extensible

eurodoblon · #1 (**permalink**) 09/10/2009, 12:17

Hola:
En primer lugar pedir disculpas por no ser ducho en javascript.

Estoy intentado hacer script para ampliar las filas de un textarea, en función del texto introducido, sin que el cliente tenga que usar el scroll (que pondré en heeden), y asi poder ver el contenido completo.

Hasta ahora he conseguido que cada 10 caraceteres o uno del key 13 me incremente una fila.

PERO NECESITO:

1.- QUE NO ME SUME LA TECLA 13 COMO UN CARACTER.
2.- QUE UNA VEZ QUE HA CONTADO LOS DIEZ PRIMEROS, CADA CARACTER nuevo ME SUMA UNA FILA MAS, y lo que quiero es que espera a otros diez.
¿Podeís ayudarme?
Muchas gracias y un saludo.

Código HTML:

<textarea cols="53" rows="10" class="input" id="comentarios"style="overflow:hidden;" tabindex="5" onblur="checkRequired('comentarios');"></textarea>
<textarea name="textarea" cols="10" rows="1" onkeydown="var key=window.event.keyCode;
if ((key==13) || (this.value.length >9))
{this.rows+=1 }
"></textarea>

Adler · #2 (**permalink**) 09/10/2009, 12:55

Hola

Prueba con esto

Código javascript:

Ver original<html>
<head>
<script type="text/javascript">
var nuevaFila = {
 
Evento: function (elemento,nomevento,funcion) {
  if (elemento.attachEvent)
  {
      var f=function(){
        funcion.call(elemento,window.event);
    }
    elemento.attachEvent('on'+nomevento,f);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,false);
      return true;
    }
    else
      return false;
},
 
 
 
init: function(){
var elem = document.getElementById("txt");
        nuevaFila.Evento(elem, 'keyup', nuevaFila.CreaFila);
    },
 
 
CreaFila: function (ev) {
var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
var elem = document.getElementById("txt");
var caracteres = elem.rows * 10;
 
if (keyCode == 8) {
if (elem.value.length < (caracteres-10)) {
elem.rows-= 1
}
}
else if (elem.value.length < 9) {
elem.rows = 1 
} else if (elem.value.length == caracteres) {
elem.rows+= 1
}
}
}
nuevaFila.Evento(window, 'load', nuevaFila.init); 
</script>
</head>
<body>
<textarea name="txt" id="txt" cols="10" rows="1"></textarea>
</body>
<html>

En cuanto al salto de linea no se me ocurre nada, de hecho no se si se puede hacer lo que pretendes

Suerte

josec89 · #3 (**permalink**) 09/10/2009, 13:32

Buenas!

Cita:

1.- QUE NO ME SUME LA TECLA 13 COMO UN CARACTER.
2.- QUE UNA VEZ QUE HA CONTADO LOS DIEZ PRIMEROS, CADA CARACTER nuevo ME SUMA UNA FILA MAS, y lo que quiero es que espera a otros diez.

1- Como Js reconoce la tecla 13 (supongo que es un salto de línea) como un carácter más, no puedes eliminarlo tan fácilmente. Se me ocurre que podrías usar un contador de carácteres

2- Un módulo es la mejor opción, creo yo:

Código:

<textarea cols="53" rows="10" class="input" id="comentarios"style="overflow:hidden;" tabindex="5" onblur="checkRequired('comentarios');"></textarea>
<textarea id="textarea1" name="textarea" cols="10" rows="1"></textarea>

<script type="text/javascript">
   
    window.onload = function()
        {
            var txth = new textareaHandler;
            document.getElementById("textarea1").onkeydown = function(event) { txth.add(event) };
        }


    function textareaHandler()
    {
        this.chars = 0;
    }

    textareaHandler.prototype =
    {
        add: function(ev)
        {
            var event = false;
       
            if(window.event)
                event = window.event;
            else
                event = ev;

            if(event)
            {
                alert(event.keyCode);
                if(event.keyCode != 13 && event.keyCode != 8 && event.keyCode != 46)
                    this.chars++;
                else if(event.keyCode == 13)
                    event.target.rows++;
               
                if(this.chars % 10 == 9)
                    event.target.rows++;
            }
        }
    };

</script>

Con esto sumas una row siempre que la tecla no sea ni ENTER ni BORRAR ni SUPRIMIR. Además se cumplen las condiciones de cada 10 chars :)
Espero que te sirva de ayuda, un saludo!

eurodoblon · #4 (**permalink**) 09/10/2009, 13:52

Gracias Josec:
Me da un error "target es nulo o no es un objeto".
Gracias

josec89 · #5 (**permalink**) 09/10/2009, 14:17

ups!
El código no es compatible con el IE ... era de esperar, cámbialo por éste ^^. De paso quito el alert que era para hacer pruebas jaja

Código:

<textarea cols="53" rows="10" class="input" id="comentarios"style="overflow:hidden;" tabindex="5" onblur="checkRequired('comentarios');"></textarea>
<textarea id="textarea1" name="textarea" cols="10" rows="1"></textarea>

<script type="text/javascript">
   
    window.onload = function()
        {
            var txth = new textareaHandler;
            document.getElementById("textarea1").onkeydown = function(event) { txth.add(event) };
        }


    function textareaHandler()
    {
        this.chars = 0;
    }

    textareaHandler.prototype =
    {
        add: function(ev)
        {
            var event = false;
            var target = false;
       
            if(window.event)
                event = window.event;
            else
                event = ev;

            if(event)
            {
                if(event.target)
                    target = event.target;
                else
                    target = event.srcElement;

                if(event.keyCode != 13 && event.keyCode != 8 && event.keyCode != 46)
                    this.chars++;
                else if(event.keyCode == 13)
                    target.rows++;
               
                if(this.chars % 10 == 9)
                    target.rows++;
            }
        }
    };

</script>

Este código es compatible con los navegadores más comunes.

>Opera no hace salto de línea cuando llegas al máximo de filas, pero eso es que es un navegador que va muy a su bola (como IE).

Espero que te sirva ahora, un saludo ^^

eurodoblon · #6 (**permalink**) 09/10/2009, 15:32

Gracias Josec.
Funciona bien. Muchas gracias y un saludo.