Augmenter dynamiquement la hauteur de la zone de texte?

Question

Possible en double:
Autosizing Textarea

Bonjour à tous, je suis en train de résoudre un problème et obtenir absolument pas où avec elle. Ce que j'essaie de faire est de changer dynamiquement la hauteur d'une zone de saisie lorsque le texte de l'utilisateur déborde de sa largeur (comme la zone de texte de mise à jour de statut de Facebook).

Vous entrez une brève mise à jour, et si le texte est plus long que la zone de texte, il crée une nouvelle ligne. J'ai essayé d'utiliser une zone de texte, mais pour une raison quelconque, je ne peux pas forcer une ligne par défaut.

Quelqu'un sait-il un moyen facile de le faire? :(

Answer 1

Pour obtenir le textarea d'étirer, donner un aller (jQuery). http://www.unwrongest.com/projects/elastic/

Quant à la hauteur exactement une ligne, vous pouvez essayer rows="1" dans la balise <textarea>, ainsi que la suppression CSS Certains navigateurs peuvent toutefois définir la hauteur minimale d'une zone de texte sur plusieurs lignes

Une autre solution consisterait à utiliser un div à l'écran qui, lorsque l'utilisateur clique dessus, fait que le navigateur se concentre sur une zone de texte masquée L'utilisateur tape dans la zone de texte cachée, et le div reçoit le contenu de la zone de texte via JavaScript. t obtient alors le curseur clignotant, mais vous pouvez utiliser le caractère | dans le div et le faire clignoter, bien que cela commence à être long à propos du moment où vous le démarrez. Je vais essayer avec le textarea à nouveau personnellement :-)

Hope this helps,

James

Answer 2

Vous pouvez contrôler manuellement la taille de l'textarea en utilisant la hauteur CSS et les paramètres de largeur. En liant un événement keypress au textarea, vous pouvez obtenir la quantité de texte dans la boîte et ajuster la hauteur en conséquence. Par exemple, voici quelques jQuery qui ajoutera 20 pixels à la hauteur de la boîte pour 50 caractères que vous mettez dans:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> 
</script> 

<textarea id="textbox" style="height:20px;width:400px;"></textarea> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#textbox").val(''); 
    $("#textbox").keypress(function() { 
     var textLength = $("#textbox").val().length; 
     if (textLength % 50 == 0) { 
      var height = textLength/50; 
      $("#textbox").css('height', 20+(height*20)); 
     } 
    }); 
}); 
</script> 

Vous pouvez modifier les valeurs pour obtenir l'effet désiré.