Création d'une textarea avec redimensionnement automatique
il y avait un autre fil à propos de ce , que j'ai essayé. Mais il y a un problème: le textarea
ne rétrécit pas si vous supprimez le contenu. Je ne trouve aucun moyen de le rétrécir à la taille correcte - la valeur clientHeight
revient comme la taille complète du textarea
, pas son contenu.
le code de cette page est ci-dessous:
function FitToContent(id, maxHeight)
{
var text = id && id.style ? id : document.getElementById(id);
if ( !text )
return;
var adjustedHeight = text.clientHeight;
if ( !maxHeight || maxHeight > adjustedHeight )
{
adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
if ( maxHeight )
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if ( adjustedHeight > text.clientHeight )
text.style.height = adjustedHeight + "px";
}
}
window.onload = function() {
document.getElementById("ta").onkeyup = function() {
FitToContent( this, 500 )
};
}
30 réponses
cela fonctionne pour moi (Firefox 3.6 / 4.0 et Chrome 10/11):
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
textarea {
border: 0 none white;
overflow: hidden;
padding: 0;
outline: none;
background-color: #D0D0D0;
}
<body onload="init();">
<textarea rows="1" style="height:1em;" id="text"></textarea>
</body>
Si vous voulez l'essayer jsfiddle
Il commence avec une seule ligne et ne croît que la quantité exacte nécessaire. Il est ok pour un simple textarea
, mais je voulais écrire quelque chose où je voudrais avoir beaucoup beaucoup de tels textarea
s (environ autant qu'on aurait normalement des lignes dans un grand document texte). Dans ce cas, il est vraiment lent. (Dans Firefox, c'est incroyablement lent.) Alors je voudrais vraiment une approche qui utilise CSS pur. Cela serait possible avec contenteditable
, mais je veux que ce soit en clair-seulement.
UNE SOLUTION COMPLÈTE ET SIMPLE
mise à Jour 23/08/2017 (amélioration du support du navigateur pour les mobiles et les tablettes)
le code suivant fonctionnera:
- Sur la touche entrée.
- Avec le texte collé (clic droit et ctrl+v).
- Avec la coupe de texte (clic droit et ctrl+x).
- avec texte pré-chargé.
- Avec tous les textarea (zone de texte multiligne) à l'échelle du site.
- avec Firefox (testé v31-55).
- avec Chrome (V37-60 testé).
- With IE (V9-v11 tested).
- avec Edge (testé v14-v15).
- With IOS Safari .
- With Android Browser .
- JavaScript mode strict .
- est W3C validé.
- et est rationalisé et efficace.
OPTION 1 (avec jQuery)
ce code exige jQuery et a été testé et fonctionne avec 1.7.2 - 3.2.1
Simple (ajoutez ce code jquery à votre fichier maître script et oubliez-le.)
$('textarea').each(function () {
this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
OPTION 2 (pur JavaScript)
Simple (ajoutez ce JavaScript à votre script principal et oubliez-le.)
var tx = document.getElementsByTagName('textarea');
for (var i = 0; i < tx.length; i++) {
tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
tx[i].addEventListener("input", OnInput, false);
}
function OnInput() {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
}
<textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder="Type, paste, cut text here..."></textarea>
OPTION 3 (jQuery Extension)
utile si vous voulez appliquer plus de chaînage aux textareas que vous voulez être auto-dimensionné.
jQuery.fn.extend({
autoHeight: function () {
function autoHeight_(element) {
return jQuery(element)
.css({ 'height': 'auto', 'overflow-y': 'hidden' })
.height(element.scrollHeight);
}
return this.each(function() {
autoHeight_(this).on('input', function() {
autoHeight_(this);
});
});
}
});
invoquer avec $('textarea').autoHeight()
UPDATING TEXTAREA VIA JAVASCRIPT
lors de l'injection de contenu dans une textarea via JavaScript ajouter le code suivant pour invoquer la fonction dans l'option 1.
$('textarea').trigger('input');
jQuery solution adaptez la css à vos besoins
css...
div#container textarea {
min-width: 270px;
width: 270px;
height: 22px;
line-height: 24px;
min-height: 22px;
overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */
padding-top: 1.1em; /* fixes text jump on Enter keypress */
}
javascript...
// auto adjust the height of
$('#container').delegate( 'textarea', 'keydown', function (){
$(this).height( 0 );
$(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keydown();
ou alternative pour jQuery 1.7+...
// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (){
$(this).height( 0 );
$(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();
j'ai créé un violon avec le style minimum absolu comme point de départ pour vos expériences... http://jsfiddle.net/53eAy/951 /
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Textarea autoresize</title>
<style>
textarea {
overflow: hidden;
}
</style>
<script>
function resizeTextarea(ev) {
this.style.height = '24px';
this.style.height = this.scrollHeight + 12 + 'px';
}
var te = document.querySelector('textarea');
te.addEventListener('input', resizeTextarea);
</script>
</head>
<body>
<textarea></textarea>
</body>
</html>
testé dans Firefox 14 et Chrome 18. Les nombres 24 et 12 sont arbitraires, testez pour voir ce qui vous convient le mieux.
vous pourriez faire sans le style et le script tags, mais il devient un peu désordonné imho (c'est L'ancien style HTML+JS et n'est pas encouragé).
<textarea style="overflow: hidden" onkeyup="this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>
Edit: code modernisé. Changé l'attribut onkeyup pour addEventListener.
Modifier: keydown fonctionne mieux que keyup
Modifier: déclarer la fonction avant d'utiliser
Edit: input works better than keydown (thnx @WASD42 & @MA-Maddin)
la meilleure solution (fonctionne et est court) pour moi est:
$(document).on('input', 'textarea', function () {
$(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or '1em' -min-height
});
il fonctionne comme un charme sans cligner des yeux avec la pâte (avec la souris aussi), couper, entrer et il rétrécit à la bonne taille.
s'il vous Plaît prendre un coup d'oeil à jsFiddle .
vous utilisez la valeur la plus élevée du clientHeight actuel et le contenu scrollHeight. Lorsque vous réduisez la taille de scrollHeight en supprimant le contenu, la zone calculée ne peut pas devenir plus petite parce que le clienttheight, précédemment défini par le style.la hauteur est de la tenir ouverte. Vous pouvez à la place prendre un max () de scrollHeight et une valeur de hauteur minimale prédéfinie ou calculée à partir de textarea.rangée.
en général, vous ne devriez probablement pas vraiment compter sur scrollHeight les contrôles de formulaire. Hormis scrollHeight étant traditionnellement moins largement pris en charge que certaines des autres extensions IE, HTML/CSS ne dit rien sur la façon dont les contrôles de formulaires sont mis en œuvre en interne et vous n'êtes pas garanti scrollHeight sera quelque chose de significatif. (Traditionnellement, certains navigateurs ont utilisé des widgets OS pour la tâche, ce qui rend l'interaction CSS et DOM sur leurs internes impossible.) Au moins renifler l'existance de scrollHeight / clientHeight avant d'essayer d'activer l'effet.
une autre approche possible pour éviter le problème s'il est important que cela fonctionne plus largement pourrait être d'utiliser une div cachée dimensionnée à la même largeur que la textarea, et placée dans la même police. Sur keyup, vous copiez le texte de la textarea vers un noeud de texte dans hidden div (en se rappelant de remplacer '\n' par un saut de ligne, et d'échapper '<'/'&' correctement si vous utilisez innerHTML). Ensuite, simplement mesurer les offsets de la divethight vous donnera la hauteur dont vous avez besoin.
si vous n'avez pas besoin de soutenir IE8, vous pouvez utiliser l'événement input
:
var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]'));
resizingTextareas.forEach(function(textarea) {
textarea.addEventListener('input', autoresize, false);
});
function autoresize() {
this.style.height = 'auto';
this.style.height = this.scrollHeight+'px';
this.scrollTop = this.scrollHeight;
window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}
Maintenant, vous avez seulement besoin d'ajouter quelques CSS et vous êtes fait:
textarea[autoresize] {
display: block;
overflow: hidden;
resize: none;
}
Utilisation:
<textarea autoresize>Type here and I’ll resize.</textarea>
vous pouvez en savoir plus sur la façon dont il fonctionne sur mon blog post .
autosize
https://github.com/jackmoore/autosize
fonctionne, autonome, est populaire (3.0 k+ GitHub étoiles en octobre 2018), disponible sur cdnjs ) et léger (~3,5 k). Démo:
<textarea id="autosize" style="width:200px;">a
J b
c</textarea>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<script>autosize(document.querySelectorAll('#autosize'));</script>
BTW, si vous utilisez L'éditeur ACE, utilisez maxLines: Infinity
: ajuster automatiquement la hauteur à contenu dans Ace Cloud 9 Editeur
Quelqu'un a-t-il considéré que le contenu était acceptable? Sans déconner avec le scrolling, et le seul JS que j'aime à ce sujet est si vous prévoyez de sauver les données sur flou... et apparemment, il est compatible sur tous les navigateurs populaires: http://caniuse.com/#feat=contenteditable
il suffit de le styliser pour ressembler à une boîte de texte, et il AutoSize... Faire de sa hauteur minimale la hauteur de texte préférée et avoir à elle.
ce qui est cool à ce sujet approche est que vous pouvez les enregistrer et les étiquettes sur certains navigateurs.
http://jsfiddle.net/gbutiri/v31o8xfo /
<style>
.autoheight {
min-height: 16px;
font-size: 16px;
margin: 0;
padding: 10px;
font-family: Arial;
line-height: 16px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
overflow: hidden;
resize: none;
border: 1px solid #ccc;
outline: none;
width: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).on('blur','.autoheight',function(e) {
var $this = $(this);
// The text is here. Do whatever you want with it.
console.log($this.html());
});
</script>
<div class="autoheight contenteditable" contenteditable="true">Mickey Mouse</div>
j'ai utilisé le code suivant pour plusieurs textareas. Travailler fin dans Chrome 12, Firefox 5 et IE 9, même avec Supprimer, couper et coller des actions effectuées dans les textareas.
<!-- language: lang-html -->
<style type='text/css'>
textarea { border:0 none; overflow:hidden; outline:none; background-color:#eee }
</style>
<textarea style='height:100px;font-family:arial' id="txt1"></textarea>
<textarea style='height:125px;font-family:arial' id="txt2"></textarea>
<textarea style='height:150px;font-family:arial' id="txt3"></textarea>
<textarea style='height:175px;font-family:arial' id="txt4"></textarea>
<script type='text/javascript'>
function attachAutoResizeEvents()
{ for(i=1;i<=4;i++)
{ var txtX=document.getElementById('txt'+i)
var minH=txtX.style.height.substr(0,txtX.style.height.indexOf('px'))
txtX.onchange=new Function("resize(this,"+minH+")")
txtX.onkeyup=new Function("resize(this,"+minH+")")
txtX.onchange(txtX,minH)
}
}
function resize(txtX,minH)
{ txtX.style.height = 'auto' // required when delete, cut or paste is performed
txtX.style.height = txtX.scrollHeight+'px'
if(txtX.scrollHeight<=minH)
txtX.style.height = minH+'px'
}
window.onload=attachAutoResizeEvents
</script>
les travaux suivants pour la coupe, le collage, etc., indépendamment du fait que ces actions sont à partir de la souris, un raccourci clavier, la sélection d'une option dans une barre de menu ... plusieurs réponses adoptent une approche similaire, mais elles ne tiennent pas compte de la taille des boîtes, ce qui explique pourquoi elles appliquent incorrectement le style overflow: hidden
.
je fais ce qui suit, qui fonctionne aussi bien avec max-height
et rows
pour la hauteur minimale et maximale.
function adjust() {
var style = this.currentStyle || window.getComputedStyle(this);
var boxSizing = style.boxSizing === 'border-box'
? parseInt(style.borderBottomWidth, 10) +
parseInt(style.borderTopWidth, 10)
: 0;
this.style.height = '';
this.style.height = (this.scrollHeight + boxSizing) + 'px';
};
var textarea = document.getElementById("ta");
if ('onpropertychange' in textarea) { // IE
textarea.onpropertychange = adjust;
} else if ('oninput' in textarea) {
textarea.oninput = adjust;
}
setTimeout(adjust.bind(textarea));
textarea {
resize: none;
max-height: 150px;
border: 1px solid #999;
outline: none;
font: 18px sans-serif;
color: #333;
width: 100%;
padding: 8px 14px;
box-sizing: border-box;
}
<textarea rows="3" id="ta">
Try adding several lines to this.
</textarea>
pour une exhaustivité absolue, vous devez appeler la fonction adjust
dans quelques autres circonstances:
- événements de redimensionnement de fenêtre, si la largeur de la
textarea
change avec redimensionnement de fenêtre, ou d'autres événements qui changent la largeur de la textarea - lorsque l'attribut de style
textarea
'sdisplay
change, p.ex. lorsqu'il passe denone
(caché) àblock
- lorsque la valeur du
textarea
est modifiée par programmation
notez que l'utilisation de window.getComputedStyle
ou d'obtenir currentStyle
peut être quelque peu coûteux en termes de calcul, donc vous pouvez vouloir mettre en cache le résultat à la place.
fonctionne pour IE6, donc j'espère vraiment que c'est assez de soutien.
il y a une approche légèrement différente.
<div style="position: relative">
<pre style="white-space: pre-wrap; word-wrap: break-word"></pre>
<textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>
l'idée est de copier le texte de textarea
dans le pre
et laisser CSS s'assurer qu'ils ont la même taille.
l'avantage est que les cadres présentent des outils simples pour déplacer le texte sans toucher à aucun événement. À savoir, dans AngularJS vous ajouteriez un ng-model="foo" ng-trim="false"
au textarea
et ng-bind="foo + '\n'"
au pre
. Voir un violon .
assurez-vous que pre
a la même taille de police que le textarea
.
quelques corrections. Fonctionne parfaitement à L'Opéra
$('textarea').bind('keyup keypress', function() {
$(this).height('');
var brCount = this.value.split('\n').length;
this.rows = brCount+1; //++ To remove twitching
var areaH = this.scrollHeight,
lineHeight = $(this).css('line-height').replace('px',''),
calcRows = Math.floor(areaH/lineHeight);
this.rows = calcRows;
});
je connais une façon courte et correcte de mettre en œuvre ceci avec jquery.Pas de div caché supplémentaire nécessaire et fonctionne dans la plupart des navigateurs
<script type="text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){
var h=$(this);
h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea
});});
</script>
Voici une directive angularjs pour la réponse de panzi.
module.directive('autoHeight', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element = element[0];
var resize = function(){
element.style.height = 'auto';
element.style.height = (element.scrollHeight)+'px';
};
element.addEventListener('change', resize, false);
element.addEventListener('cut', resize, false);
element.addEventListener('paste', resize, false);
element.addEventListener('drop', resize, false);
element.addEventListener('keydown',resize, false);
setTimeout(resize, 100);
}
};
});
HTML:
<textarea ng-model="foo" auto-height></textarea>
Comme une approche différente, vous pouvez utiliser un <span>
qui ajuste sa taille automatiquement. Vous devez le rendre modifiable en ajoutant la propriété contenteditable="true"
et vous avez terminé:
div {
width: 200px;
}
span {
border: 1px solid #000;
padding: 5px;
}
<div>
<span contenteditable="true">This text can be edited by the user</span>
</div>
le seul problème avec cette approche est que si vous voulez soumettre la valeur comme partie du formulaire, vous devrez le faire vous-même en JavaScript. Cela est relativement facile. Par exemple, vous pouvez ajouter un champ caché et dans l'événement onsubmit
du formulaire attribue la valeur du span
au champ caché qui sera alors automatiquement soumis avec le formulaire.
certaines des réponses ici ne tiennent pas compte du remplissage.
en supposant que vous avez un maxHeight que vous ne voulez pas passer, cela a fonctionné pour moi:
// obviously requires jQuery
// element is the textarea DOM node
var $el = $(element);
// inner height is height + padding
// outerHeight includes border (and possibly margins too?)
var padding = $el.innerHeight() - $el.height();
var originalHeight = $el.height();
// XXX: Don't leave this hardcoded
var maxHeight = 300;
var adjust = function() {
// reset it to the original height so that scrollHeight makes sense
$el.height(originalHeight);
// this is the desired height (adjusted to content size)
var height = element.scrollHeight - padding;
// If you don't want a maxHeight, you can ignore this
height = Math.min(height, maxHeight);
// Set the height to the new adjusted height
$el.height(height);
}
// The input event only works on modern browsers
element.addEventListener('input', adjust);
une approche encore plus simple et plus propre est celle-ci:
// adjust height of textarea.auto-height
$(document).on( 'keyup', 'textarea.auto-height', function (e){
$(this).css('height', 'auto' ); // you can have this here or declared in CSS instead
$(this).height( this.scrollHeight );
}).keyup();
/ / et le CSS
textarea.auto-height {
resize: vertical;
max-height: 600px; /* set as you need it */
height: auto; /* can be set here of in JS */
overflow-y: auto;
word-wrap:break-word
}
Tout ce qui est nécessaire est d'ajouter la classe .auto-height
à n'importe quel textarea
que vous voulez cibler.
testé en FF, Chrome et Safari. Dis-moi si ça ne marche pas pour toi, pour une raison quelconque. Mais c'est le moyen le plus simple et le plus propre que j'ai trouvé pour que ça marche. Et il fonctionne très bien! : D
Ce code fonctionne pour le collage et sélectionnez supprimer également.
onKeyPressTextMessage = function(){
var textArea = event.currentTarget;
textArea.style.height = 'auto';
textArea.style.height = textArea.scrollHeight + 'px';
};
<textarea onkeyup="onKeyPressTextMessage(event)" name="welcomeContentTmpl" id="welcomeContent" onblur="onblurWelcomeTitle(event)" rows="2" cols="40" maxlength="320"></textarea>
voici le JSFiddle
il suffit d'utiliser <pre> </pre>
avec certains styles tels que:
pre {
font-family: Arial, Helvetica, sans-serif;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 12px;
line-height: 16px;
}
voici ce que j'ai fait en utilisant MVC HTML Helper pour TextArea. J'avais pas mal d'éléments textarea donc j'ai dû les distinguer en utilisant Model Id.
@Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })
et dans script a ajouté ceci:
function resizeTextBox(ID) {
var text = document.getElementById('text' + ID);
text.style.height = 'auto';
text.style.height = text.scrollHeight + 'px';
}
Je l'ai testé sur IE10 et Firefox23
vous pouvez utiliser ce code:
Coffescript:
jQuery.fn.extend autoHeightTextarea: ->
autoHeightTextarea_ = (element) ->
jQuery(element).css(
'height': 'auto'
'overflow-y': 'hidden').height element.scrollHeight
@each ->
autoHeightTextarea_(@).on 'input', ->
autoHeightTextarea_ @
$('textarea_class_or_id`').autoHeightTextarea()
Javascript
jQuery.fn.extend({
autoHeightTextarea: function() {
var autoHeightTextarea_;
autoHeightTextarea_ = function(element) {
return jQuery(element).css({
'height': 'auto',
'overflow-y': 'hidden'
}).height(element.scrollHeight);
};
return this.each(function() {
return autoHeightTextarea_(this).on('input', function() {
return autoHeightTextarea_(this);
});
});
}
});
$('textarea_class_or_id`').autoHeightTextarea();
pour ceux qui veulent que le textarea soit redimensionné automatiquement en largeur et en hauteur:
HTML:
<textarea class='textbox'></textarea>
<div>
<span class='tmp_textbox'></span>
</div>
CSS:
.textbox,
.tmp_textbox {
font-family: 'Arial';
font-size: 12px;
resize: none;
overflow:hidden;
}
.tmp_textbox {
display: none;
}
jQuery:
$(function(){
//alert($('.textbox').css('padding'))
$('.textbox').on('keyup change', checkSize)
$('.textbox').trigger('keyup')
function checkSize(){
var str = $(this).val().replace(/\r?\n/g, '<br/>');
$('.tmp_textbox').html( str )
console.log($(this).val())
var strArr = str.split('<br/>')
var row = strArr.length
$('.textbox').attr('rows', row)
$('.textbox').width( $('.tmp_textbox').width() + parseInt($('.textbox').css('padding')) * 2 + 10 )
}
})
Codepen:
http://codepen.io/anon/pen/yNpvJJ
Cheers,
la solution jQuery est de régler la hauteur de la textarea à "auto", vérifier la hauteur de la textarea et ensuite adapter la hauteur de la textarea à cela, chaque fois qu'une textarea change ( JSFiddle ):
$('textarea').on( 'input', function(){
$(this).height( 'auto' ).height( this.scrollHeight );
});
si vous ajoutez dynamiquement des textareas (via AJAX ou autre), vous pouvez ajouter ceci dans votre $(document).prêt à s'assurer que tous les textareas avec la classe 'autoheight' sont maintenus à la même hauteur que leur contenu:
$(document).on( 'input', 'textarea.autoheight', function() {
$(this).height( 'auto' ).height( this.scrollHeight );
});
testé et travaillant en Chrome, Firefox, Opera et IE. Soutient aussi la coupe et le collage, les longs mots, etc.
vous pouvez utiliser ce morceau de code pour calculer le nombre de lignes dont un textarea a besoin:
textarea.rows = 1;
if (textarea.scrollHeight > textarea.clientHeight)
textarea.rows = textarea.scrollHeight / textarea.clientHeight;
calcule sur les événements input
et window:resize
pour obtenir l'effet de redimensionnement automatique. Exemple en angle:
code de Modèle:
<textarea rows="1" reAutoWrap></textarea>
auto-wrap.directive.ts
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: 'textarea[reAutoWrap]',
})
export class AutoWrapDirective {
private readonly textarea: HTMLTextAreaElement;
constructor(el: ElementRef) {
this.textarea = el.nativeElement;
}
@HostListener('input') onInput() {
this.resize();
}
@HostListener('window:resize') onChange() {
this.resize();
}
private resize() {
this.textarea.rows = 1;
if (this.textarea.scrollHeight > this.textarea.clientHeight)
this.textarea.rows = this.textarea.scrollHeight / this.textarea.clientHeight;
}
}
solution Javascript Native sans scintillement dans Firefox et plus rapide que la méthode avec ClientHeight...
1) Ajouter div.textarea
à tous vos sélecteurs contenant textarea
. N'oubliez pas d'ajouter box-sizing: border-box;
2) inclure ce script:
function resizeAll()
{
var textarea=document.querySelectorAll('textarea');
for(var i=textarea.length-1; i>=0; i--)
resize(textarea[i]);
}
function resize(textarea)
{
var div = document.createElement("div");
div.setAttribute("class","textarea");
div.innerText=textarea.value+"\r\n";
div.setAttribute("style","width:"+textarea.offsetWidth+'px;display:block;height:auto;left:0px;top:0px;position:fixed;z-index:-200;visibility:hidden;word-wrap:break-word;overflow:hidden;');
textarea.form.appendChild(div);
var h=div.offsetHeight;
div.parentNode.removeChild(div);
textarea.style.height=h+'px';
}
function resizeOnInput(e)
{
var textarea=document.querySelectorAll('textarea');
for(var i=textarea.length-1; i>=0; i--)
textarea[i].addEventListener("input",function(e){resize(e.target); return false;},false);
}
window.addEventListener("resize",function(){resizeAll();}, false);
window.addEventListener("load",function(){resizeAll();}, false);
resizeOnInput();
testé sur IE11, Firefox et Chrome.
cette solution crée div similaire à votre textarea y compris le texte interne et les mesures de hauteur.
Maketextrearesisable that uses qQuery
function MakeTextAreaResisable(id) {
var o = $(id);
o.css("overflow-y", "hidden");
function ResizeTextArea() {
o.height('auto');
o.height(o[0].scrollHeight);
}
o.on('change', function (e) {
ResizeTextArea();
});
o.on('cut paste drop keydown', function (e) {
window.setTimeout(ResizeTextArea, 0);
});
o.focus();
o.select();
ResizeTextArea();
}
aucune des réponses ne semble fonctionner. Mais celui-ci fonctionne pour moi: https://coderwall.com/p/imkqoq/resize-textarea-to-fit-content
$('#content').on( 'change keyup keydown paste cut', 'textarea', function (){
$(this).height(0).height(this.scrollHeight);
}).find( 'textarea' ).change();
j'ai testé script dans les navigateurs courants, et il a échoué dans Chrome et Safari. C'est en raison de la variable scrollHeight constamment mis à jour.
j'ai appliqué Mécontentgoat script en utilisant jQuery et ajouté chrome fix
function fitToContent(/* JQuery */text, /* Number */maxHeight) {
var adjustedHeight = text.height();
var relative_error = parseInt(text.attr('relative_error'));
if (!maxHeight || maxHeight > adjustedHeight) {
adjustedHeight = Math.max(text[0].scrollHeight, adjustedHeight);
if (maxHeight)
adjustedHeight = Math.min(maxHeight, adjustedHeight);
if ((adjustedHeight - relative_error) > text.height()) {
text.css('height', (adjustedHeight - relative_error) + "px");
// chrome fix
if (text[0].scrollHeight != adjustedHeight) {
var relative = text[0].scrollHeight - adjustedHeight;
if (relative_error != relative) {
text.attr('relative_error', relative + relative_error);
}
}
}
}
}
function autoResizeText(/* Number */maxHeight) {
var resize = function() {
fitToContent($(this), maxHeight);
};
$("textarea").attr('relative_error', 0);
$("textarea").each(resize);
$("textarea").keyup(resize).keydown(resize);
}