textarea redimensionner automatiquement dans jquery

Question

Comment puis-je faire un <textarea> redimensionner automatiquement avec son contenu (comme sur Facebook) en utilisant jQuery.

Answer 1

Utilisez jQuery UI

Cocher cette démo: http://jqueryui.com/demos/resizable/#textarea

Answer 2

<script type="text/javascript"> 

    function adjustTextarea(this_){ 

    var value_ = this_.value; 

    value_ = value_.replace(new RegExp("\n\r", 'gi'), "\n"); 
    value_ = value_.replace(new RegExp("\r", 'gi'), "\n"); 

    var split_ = value_.split("\n"); 
    this_.rows = split_.length; 

    return; 
    } 

    </script> 

    <textarea cols="100" style="overflow:hidden;" onkeyup="adjustTextarea(this);" onfocus="adjustTextarea(this);" > 
    Text 
    </textarea> 

Answer 3

Utilisez James Padolsey AutoResize plugin jquery de http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Utilisation de base

$('textarea#comment').autoResize({ 
     // On resize: 
     onResize : function() { 
     $(this).css({opacity:0.8}); 
     }, 
     // After resize: 
     animateCallback : function() { 
     $(this).css({opacity:1}); 
     }, 
     // Quite slow animation: 
     animateDuration : 300, 
     // More extra space: 
     extraSpace : 40 
    }); 

Answer 4

poids super léger:

Est-ce que quelqu'un a considéré contenteditable? Pas de déconner avec le défilement, et le seul JS que j'aime à ce sujet est si vous prévoyez d'enregistrer les données sur le flou ... et apparemment, il est compatible sur tous les navigateurs populaires: http://caniuse.com/#feat=contenteditable

comme une boîte de texte, et il s'autosise ... Faites sa taille min-hauteur de la hauteur de texte préférée et y avoir.

Ce qui est cool à propos de cette approche est que vous pouvez enregistrer et balises 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 <b>Mouse</b></div>