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 )
    };
}
276
demandé sur Racil Hilan 2009-01-18 01:30:42

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.

175
répondu panzi 2016-09-09 19:30:32

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>

Essai sur jsfiddle


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>

Essai sur jsfiddle


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');
234
répondu DreamTeK 2017-08-23 13:01:31

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 /

61
répondu chim 2016-03-14 15:18:47
<!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)

jsfiddle

28
répondu GijsjanB 2017-03-09 09:55:44

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 .

21
répondu vatavale 2016-02-05 10:31:24

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.

16
répondu bobince 2009-01-18 00:57:13

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 .

14
répondu We are hiring Elm and JS devs 2014-07-25 14:27:49

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

9

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>
6
répondu Webmaster G 2014-10-16 20:09:28

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>
4
répondu Nikunj Bhatt 2011-06-23 15:10:50

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:

  1. é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
  2. lorsque l'attribut de style textarea 's display change, p.ex. lorsqu'il passe de none (caché) à block
  3. 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.

4
répondu Joseph Nields 2017-08-24 17:14:43

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 .

3
répondu Karolis Juodelė 2014-07-17 14:45:33

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;
  });
2
répondu artnik-pro 2011-06-19 12:29:54

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>
2
répondu 2012-05-24 08:46:12

Je ne sais pas si quelqu'un mentionne cette façon, mais dans certains cas, il est possible de redimensionner la hauteur avec l'attribut rows

textarea.setAttribute('rows',breaks);

Démo

2
répondu h0mayun 2014-11-11 12:48:45

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>
2
répondu chrmcpn 2017-11-28 20:48:46

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.

2
répondu Racil Hilan 2018-03-24 14:40:25

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);
1
répondu hasen 2013-06-01 12:56:05

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

1
répondu revive 2016-03-22 06:43:11

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

1
répondu Kurenai Kunai 2016-09-14 08:59:19

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;
    }
1
répondu Liber 2016-09-30 07:42:01

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

0
répondu gunnerz 2013-09-11 13:38:19

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();
0
répondu Darex1991 2015-06-08 15:03:49

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,

0
répondu Goon Nguyen 2015-06-29 04:51:34

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.

0
répondu patrick 2016-07-02 10:25:48

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;
  }

}
0
répondu André 2017-03-14 13:22:14

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.

0
répondu 18C 2017-11-18 05:49:56

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();
}
0
répondu Igor Krupitsky 2018-06-19 18:01:48

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();
0
répondu Kim Homann 2018-10-04 11:51:57

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);
}
-1
répondu 2009-09-07 14:01:05