javascript - ejemplo - textarea placeholder

Altura automática de Textarea

Question

Esta pregunta ya tiene una respuesta aquí:

• Creando un área de texto con auto-cambio de tamaño 33 respuestas

Quiero hacer que la altura de textarea sea igual a la altura del texto dentro de ella (y eliminar la barra de desplazamiento)

HTML

<textarea id="note">SOME TEXT</textarea>

CSS

textarea#note {
width:100%;
direction:rtl;
display:block;
max-width:100%;
line-height:1.5;
padding:15px 15px 30px;
border-radius:3px;
border:1px solid #F7E98D;
font:13px Tahoma, cursive;
transition:box-shadow 0.5s ease;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
font-smoothing:subpixel-antialiased;
background:linear-gradient(#F9EFAF, #F7E98D);
background:-o-linear-gradient(#F9EFAF, #F7E98D);
background:-ms-linear-gradient(#F9EFAF, #F7E98D);
background:-moz-linear-gradient(#F9EFAF, #F7E98D);
background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}

JsFiddle: http://jsfiddle.net/Tw9Rj/

Answer 1

Esto usando el Código de JavaScript puro.

function auto_grow(element) {
element.style.height = "5px";
element.style.height = (element.scrollHeight)+"px";
}

textarea {
resize: none;
overflow: hidden;
min-height: 50px;
max-height: 100px;
}

<textarea onkeyup="auto_grow(this)"></textarea>

Answer 2

Para aquellos de nosotros que logramos esto con Angular, utilicé una directiva

HTML:

<textarea elastic ng-model="someProperty"></textarea>

JS:

.directive(''elastic'', [
''$timeout'',
function($timeout) {
return {
restrict: ''A'',
link: function($scope, element) {
$scope.initialHeight = $scope.initialHeight || element[0].style.height;
var resize = function() {
element[0].style.height = $scope.initialHeight;
element[0].style.height = "" + element[0].scrollHeight + "px";
};
element.on("input change", resize);
$timeout(resize, 0);
}
};
}
]);

$timeout cola un evento que se activará después de que se cargue el DOM, que es lo que se necesita para obtener el scrollHeight correcto (de lo contrario, no se definirá)

Answer 3

Utilicé jQuery AutoSize . Cuando traté de usar Elastic, con frecuencia me daba alturas falsas (muy altas en textarea). jQuery AutoSize ha funcionado bien y no ha tenido este problema.

Answer 4

Veo que esto ya está respondido, pero creo que tengo una solución jQuery simple (jQuery ni siquiera es realmente necesario, simplemente disfruto usarlo):

Sugiero contar los saltos de línea en el texto textarea y establecer el atributo rows del área de textarea consecuencia.

var text = jQuery(''#your_textarea'').val(),
// look for any "/n" occurences
matches = text.match(//n/g),
breaks = matches ? matches.length : 2;
jQuery(''#your_textarea'').attr(''rows'',breaks + 2);

Answer 5

Jsfiddle

textarea#note {
width:100%;
direction:rtl;
display:block;
max-width:100%;
line-height:1.5;
padding:15px 15px 30px;
border-radius:3px;
border:1px solid #F7E98D;
font:13px Tahoma, cursive;
transition:box-shadow 0.5s ease;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
font-smoothing:subpixel-antialiased;
background:-o-linear-gradient(#F9EFAF, #F7E98D);
background:-ms-linear-gradient(#F9EFAF, #F7E98D);
background:-moz-linear-gradient(#F9EFAF, #F7E98D);
background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
background:linear-gradient(#F9EFAF, #F7E98D);
height:100%;
}
html{
height:100%;
}
body{
height:100%;
}

o javascript

var s_height = document.getElementById(''note'').scrollHeight;
document.getElementById(''note'').setAttribute(''style'',''height:''+s_height+''px'');

Jsfiddle

Answer 6

Se puede lograr usando JS. Aquí hay una solution ''una línea'' solution usa elastic.js :

$(''#note'').elastic();

Actualizado: parece que elastic.js ya no está allí, pero si buscas una biblioteca externa, puedo recomendar autosize.js por Jack Moore . Este es el ejemplo de trabajo:

autosize(document.getElementById("note"));

textarea#note {
width:100%;
box-sizing:border-box;
direction:rtl;
display:block;
max-width:100%;
line-height:1.5;
padding:15px 15px 30px;
border-radius:3px;
border:1px solid #F7E98D;
font:13px Tahoma, cursive;
transition:box-shadow 0.5s ease;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
font-smoothing:subpixel-antialiased;
background:linear-gradient(#F9EFAF, #F7E98D);
background:-o-linear-gradient(#F9EFAF, #F7E98D);
background:-ms-linear-gradient(#F9EFAF, #F7E98D);
background:-moz-linear-gradient(#F9EFAF, #F7E98D);
background:-webkit-linear-gradient(#F9EFAF, #F7E98D);
}

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>

Verifique también este tema similar:

Autosizing área de texto usando prototipo

Textarea para cambiar el tamaño en función de la longitud del contenido

Creando un área de texto con auto-cambio de tamaño

Answer 7

html

<textarea id="wmd-input" name="md-content"></textarea>

js

var textarea = $(''#wmd-input''),
top = textarea.scrollTop(),
height = textarea.height();
if(top > 0){
textarea.css("height",top + height)
}

css

#wmd-input{
width: 100%;
overflow: hidden;
padding: 10px;
}

Answer 8

var minRows = 5;
var maxRows = 26;
function ResizeTextarea(id) {
var t = document.getElementById(id);
if (t.scrollTop == 0) t.scrollTop=1;
while (t.scrollTop == 0) {
if (t.rows > minRows)
t.rows--; else
break;
t.scrollTop = 1;
if (t.rows < maxRows)
t.style.overflowY = "hidden";
if (t.scrollTop > 0) {
t.rows++;
break;
}
}
while(t.scrollTop > 0) {
if (t.rows < maxRows) {
t.rows++;
if (t.scrollTop == 0) t.scrollTop=1;
} else {
t.style.overflowY = "auto";
break;
}
}
}