Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » textarea redimensionable

JQuery - textarea redimensionable

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 18
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

textarea redimensionable

Publicado por Marta (12 intervenciones) el 01/01/2021 22:44:17
Buenas, uso esta función que encontré en google para redimensionar verticalmente los textarea, para que se vea todo el contenido, sin scroll. Hace un efecto raro con la barra del scroll al visualizarse y ocultarla al momento, pero me sirve

1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
    $(newFunction()).on('keyup keypress', function() {
        $(this).height(0);
        $(this).height(this.scrollHeight);
    });
});
 
function newFunction() {
    return 'textarea';
}

El problema es que hay unos textarea que los creo dinámicamente según las acciones del usuario, y estos textarea no se detectan en el document.ready, y entiendo porqué. He intentado añadir los eventos keypress y keyup en los textareas con una llamada a la función pasando por parámetro this, pero no funciona.

Alguien sabe cómo hacer o si existe alguna manera más fácil de hacer los texarea autodimensionables?

Muchas gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 18
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

textarea redimensionable

Publicado por Marta (12 intervenciones) el 02/01/2021 12:22:43
Buenas, en google he encontrado esta solución

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(document).ready(function(){
    $(function(){
        setTextareaHeight($('textarea'));
    })
});
 
function setTextareaHeight(textareas) {
    textareas.each(function () {
        var textarea = $(this);
        if ( !textarea.hasClass('autoHeightDone') ) {
            textarea.addClass('autoHeightDone');
            var extraHeight = parseInt(textarea.css('padding-top')) + parseInt(textarea.css('padding-bottom')), // to set total height - padding size
            h = textarea[0].scrollHeight - extraHeight;
 
            // init height
            textarea.height('auto').height(h);
            textarea.bind('keyup', function() {
                textarea.removeAttr('style'); // no funciona el height auto
                h = textarea.get(0).scrollHeight - extraHeight;
                textarea.height(h+'px'); // set new height
                textarea.width('100%')
            });
        }
    })
}

Funciona, pero tambien redimensiona el ancho y en este caso, los tengo todos al 100% y lo he añadido a piñón fijo, pero no entiendo porqué cambia el ancho.

Hace un efecto raro, pero si a alguien le interesa, aquí lo dejo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar