Création d'une zone de texte avec redimensionnement automatique
Il y avait un autre fil à ce sujet , que j'ai essayé. Mais il y a un problème: la textarea ne se réduit pas si vous supprimez le contenu. Je ne trouve aucun moyen de réduire la taille à la taille correcte - la valeur clientHeight revient comme la taille complète de la 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 )
};
}
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 sur jsfiddle .__, il commence par une seule ligne et n'augmente que la quantité exacte nécessaire. C'est correct pour un seul textarea, mais je voulais écrire quelque chose dans lequel j'aurais beaucoup d'autres noms textareas (à peu près autant que l'on aurait normalement des lignes dans un grand document texte). Dans ce cas, c'est vraiment lent. (Dans Firefox, c'est incroyablement lent.) Donc, j'aimerais vraiment une approche qui utilise du CSS pur. Cela serait possible avec contenteditable, mais je veux que ce soit uniquement en texte brut.
UNE SOLUTION COMPLÈTE ET SIMPLE
Mis à jour 07/05/2019 (prise en charge améliorée du navigateur pour les téléphones portables et les tablettes)
Le code suivant fonctionnera:
- Sur entrée clé.
- Avec du texte collé (clic droit & ctrl + v).
- Avec texte coupé (clic droit & ctrl + x).
- Avec du texte pré-chargé.
- Avec toutes les zones de texte (zones de texte multilignes) .
- Avec Firefox (v31-67 testé).
- Avec Chrome (v37-74 testé).
- Avec C'EST-À-DIRE (v9-v11 testée).
- Avec Edge (v14-v18 testée).
- Avec IOS Safari .
- Avec Navigateur Android .
- Avec JavaScript mode strict .
- Est-ce que w3c est validé?.
- Et est rationalisé et efficace.
OPTION 1 (avec jQuery)
Cette option nécessite jQuery et a été testée et fonctionne avec 1.7.2 - 3.3.1
Simple (Ajoutez ce code jQuery à votre fichier de script maître 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://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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 (JavaScript pur)
Simple (Ajoutez ce JavaScript à votre fichier de script maître 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 (extension jQuery)
Utile si vous souhaitez appliquer un chaînage supplémentaire aux zones de texte à dimensionner automatiquement.
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()
MISE À JOUR DE TEXTAREA VIA JAVASCRIPT
Lors de l’injection de contenu dans une zone de texte via JavaScript, ajoutez le code suivant pour appeler la fonction dans l’option 1.
$('textarea').trigger('input');
solution jQuery ajustez le 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 minimal absolu comme point de départ de 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é sous Firefox 14 et Chrome 18. Les chiffres 24 et 12 sont arbitraires, testez pour voir ce qui vous convient le mieux.
Vous pourriez vous passer des balises de style et de script, mais cela devient un peu désordonné à mon humble avis (c'est du style ancien HTML + JS et ce n'est pas recommandé).
<textarea style="overflow: hidden" onkeyup="this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>
Edit: code modernisé. Attribut onkeyup modifié en addEventListener.
Edit: keydown fonctionne mieux que keyup
Edit: déclarer la fonction avant d’utiliser
Edit: la saisie fonctionne mieux que keydown (thnx @ WASD42 & @ MA-Maddin)
La meilleure solution (fonctionne et est courte) pour moi est:
$(document).on('input', 'textarea', function () {
$(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or '1em' -min-height
});
Cela fonctionne comme un charme sans clignoter avec la pâte (avec la souris aussi), couper, entrer et il rétrécit à la bonne taille.
S'il vous plaît jeter un oeil à jsFiddle .
Vous utilisez la valeur la plus élevée de clientHeight actuel et le contenu scrollHeight. Lorsque vous réduisez le scrollHeight en supprimant du contenu, la zone calculée ne peut pas être réduite car le clientHeight, défini auparavant par style.height, le maintient ouvert. Vous pouvez plutôt prendre un max () de scrollHeight et une valeur de hauteur minimale prédéfinie ou calculée à partir de textarea.rows.
En général, vous ne devriez probablement pas vraiment compter sur scrollHeight sur les contrôles de formulaire. En dehors du fait que scrollHeight est traditionnellement moins pris en charge que certaines des autres extensions IE, HTML/CSS ne dit rien sur la façon dont les contrôles de formulaire sont implémentés en interne et vous n'êtes pas sûr que scrollHeight aura un sens. (Traditionnellement, certains navigateurs utilisaient des widgets de système d’exploitation pour la tâche, ce qui rendait impossible toute interaction entre CSS et DOM sur leurs éléments internes.) Au moins recherchez l’existence de scrollHeight/clientHeight avant de tenter d’activer l’effet.
Une autre solution possible pour éviter le problème s’il est important de travailler plus largement consiste à utiliser un div caché de la même largeur que textarea et défini dans la même police. Sur keyup, vous copiez le texte de la zone de texte vers un nœud de texte en div caché (en vous rappelant de remplacer '\ n' par un saut de ligne, et d’évacuer '<'/'&' correctement si vous utilisez innerHTML). Il vous suffira ensuite de mesurer la hauteur compensée de la div pour obtenir la hauteur dont vous avez besoin.
Si vous n’avez pas besoin de supporter 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, il vous suffit d’ajouter du CSS et vous avez terminé:
textarea[autoresize] {
display: block;
overflow: hidden;
resize: none;
}
Utilisation:
<textarea autoresize>Type here and I’ll resize.</textarea>
Vous pouvez en savoir plus sur son fonctionnement sur mon blog.
autosize
https://github.com/jackmoore/autosize
Just Works, autonome, est populaire (3,0k + étoiles GitHub à partir d’octobre 2018), disponible sur cdnjs ) et léger (~ 3,5k). 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>Si vous utilisez l'éditeur ACE, utilisez maxLines: Infinity: Ajustez automatiquement la hauteur au contenu dans l'éditeur Ace Cloud 9
Quelqu'un at-il considéré contenteditable? Pas de déconner avec le défilement, et le seul JS que j’aime bien, c’est si vous envisagez de sauvegarder les données sur flou ... et apparemment, il est compatible avec tous les navigateurs populaires: http://caniuse.com/ # feat = contenteditable
Dénommez-le simplement pour qu'il ressemble à une zone de texte et sa taille se réduit automatiquement ... Définissez sa hauteur minimale comme hauteur de texte préférée.
Ce qui est bien avec cette approche, c'est que vous pouvez enregistrer des 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 Mouse</div>
J'ai utilisé le code suivant pour plusieurs zones de texte. Fonctionne parfaitement dans Chrome 12, Firefox 5 et IE 9, même avec les actions de suppression, couper et coller effectuées dans les zones de texte.
<!-- 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>
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 la pre et de laisser CSS s’assurer qu’ils ont la même taille.
L'avantage est que les frameworks offrent des outils simples pour déplacer du texte sans toucher aucun événement. À savoir, dans AngularJS, vous ajouteriez un ng-model="foo" ng-trim="false" à la textarea et un ng-bind="foo + '\n'" à la pre. Voir un violon .
Assurez-vous simplement que pre a la même taille de police que textarea.
Dans une approche différente, vous pouvez utiliser un <span> qui ajuste automatiquement sa taille. Vous devrez le rendre modifiable en ajoutant la propriété contenteditable="true" et vous aurez 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 souhaitez soumettre la valeur dans le cadre du formulaire, vous devez le faire vous-même en JavaScript. Cela est relativement facile. Par exemple, vous pouvez ajouter un champ masqué et, dans l'événement onsubmit du formulaire, attribuer la valeur de span au champ masqué, qui sera ensuite automatiquement soumis avec le formulaire.
Ce qui suit fonctionne pour couper, coller, etc., que ces actions proviennent de la souris, d’un raccourci clavier, de la sélection d’une option dans une barre de menus ... plusieurs réponses adoptent une approche similaire mais ne tiennent pas compte de la boîte. C'est pourquoi ils appliquent incorrectement le style overflow: hidden.
Je fais ce qui suit, qui fonctionne aussi bien avec max-height et rows pour les hauteurs minimum et maximum.
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 complétude absolue, vous devez appeler la fonction adjust dans quelques circonstances supplémentaires:
- Evénements de redimensionnement de la fenêtre, si la largeur de la variable
textareachange avec le redimensionnement de la fenêtre, ou d’autres événements qui modifient la largeur de la zone de texte - Lorsque l'attribut de style
textarea'sdisplaychange, par ex. quand il passe denone(caché) àblock - Lorsque la valeur de
textareaest modifiée par programme
Notez que l'utilisation de window.getComputedStyle ou l'obtention de currentStyle peut être assez onéreuse en termes de calcul, vous pouvez donc préférer mettre en cache le résultat.
Fonctionne pour IE6, donc j'espère vraiment que ce sera un support suffisant.
Vous pouvez utiliser JQuery pour développer la textarea en tapant:
$(document).find('textarea').each(function () {
var offset = this.offsetHeight - this.clientHeight;
$(this).on('keyup input focus', function () {
$(this).css('height', 'auto').css('height', this.scrollHeight + offset);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<textarea name="note"></textarea>
<div>Je ne sais pas si quelqu'un le mentionne, mais dans certains cas, il est possible de redimensionner la hauteur avec des lignes. Attribut
textarea.setAttribute('rows',breaks);
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>
Je connais un moyen court et correct d'implémenter cela avec jquery.Aucune div cachée supplémentaire n'est 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>
Un peu de 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;
});
Une approche encore plus simple et plus propre est la suivante:
// 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
}
Il suffit d’ajouter la classe .auto-height à la variable textarea que vous souhaitez cibler.
Testé dans FF, Chrome et Safari. Faites-moi savoir si cela ne fonctionne pas pour vous, pour une raison quelconque. Mais, c’est la manière la plus simple et la plus propre que j’ai trouvée de fonctionner. Et ça marche très bien! :RÉ
mon implémentation est très simple, comptez le nombre de lignes de l’entrée (et au minimum 2 lignes pour indiquer qu’il s’agit d’une zone de texte):
textarea.rows = Math.max(2, textarea.value.split("\n").length) // # oninput
exemple de travail complet avec stimulus: https://jsbin.com/kajosolini/1/edit?html,js,output
(et cela fonctionne avec le descripteur de redimensionnement manuel du navigateur, par exemple)
Ceux qui veulent atteindre le même objectif dans les nouvelles versions de Angular.
Saisissez textArea elementRef.
@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;
public autoShrinkGrow() {
textArea.style.overflow = 'hidden';
textArea.style.height = '0px';
textArea.style.height = textArea.scrollHeight + 'px';
}
<textarea (keyup)="autoGrow()" #textArea></textarea>
J'ajoute également un autre cas d'utilisation pouvant être utile à certains utilisateurs qui lisent le fil. Lorsque l'utilisateur souhaite augmenter la hauteur de la zone de texte à une certaine hauteur, puis avoir overflow:scroll, la méthode ci-dessus peut être étendue pour atteindre le cas d'utilisation mentionné. .
public autoGrowShrinkToCertainHeight() {
const textArea = this.textArea.nativeElement;
if (textArea.scrollHeight > 77) {
textArea.style.overflow = 'auto';
return;
}
else {
textArea.style.overflow = 'hidden';
textArea.style.height = '0px';
textArea.style.height = textArea.scrollHeight + 'px';
}
}
Certaines des réponses ici ne tiennent pas compte du rembourrage.
En supposant que vous ayez un maxHeight que vous ne voulez pas dé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);
Utilisez simplement <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;
}
Le meilleur moyen que j'ai trouvé:
$("textarea.auto-grow").each( function(){
$(this).keyup(function(){
$(this).height( $(this)[0].scrollHeight - Number( $(this).css("font-size").replace("px", "") ) );
});
});
D'autres moyens ont un bug de la taille de la police.
Thats pourquoi c'est le meilleur.
Voici ce que j'ai fait en utilisant MVC HTML Helper pour TextArea. J'avais pas mal d'éléments textarea donc je devais les distinguer en utilisant Model Id.
@Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })
et dans le script 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
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();
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();
Vous pouvez utiliser cette partie de code pour calculer le nombre de lignes nécessaires à une zone de texte:
textarea.rows = 1;
if (textarea.scrollHeight > textarea.clientHeight)
textarea.rows = textarea.scrollHeight / textarea.clientHeight;
Calculez-le sur les événements input et window:resize pour obtenir un effet de redimensionnement automatique. Exemple en angulaire:
Code du 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;
}
}
Pour ceux qui souhaitent que la zone de texte soit redimensionnée 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
À votre santé,
La solution jQuery consiste à définir la hauteur de la zone de texte sur 'auto', à vérifier le scrollHeight, puis à adapter la hauteur de la zone de texte à celle-ci, chaque fois qu'une zone de texte change ( JSFiddle ):
$('textarea').on( 'input', function(){
$(this).height( 'auto' ).height( this.scrollHeight );
});
Si vous ajoutez dynamiquement des zones de texte (par le biais de AJAX ou autre), vous pouvez ajouter ceci dans votre $ (document) .ready pour vous assurer que toutes les zones de texte avec la classe 'autoheight' sont conservées à la même hauteur que leur contenu:
$(document).on( 'input', 'textarea.autoheight', function() {
$(this).height( 'auto' ).height( this.scrollHeight );
});
Testé et fonctionnant sous Chrome, Firefox, Opera et IE. Prend également en charge couper et coller, mots longs, etc.
Solution Javascript native sans scintillement dans Firefox et plus rapide que la méthode withclientHeight ...
1) Ajoutez le sélecteur 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 un div similaire à votre zone de texte, y compris le texte interne et les mesures de hauteur.
MakeTextAreaResisable utilisant 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();
}