Le champ de saisie de texte html augmente-t-il lorsque je tape?

Voici un exemple avec seulement CSS et Content Editable :

JsFiddle Example

CSS

 span { border: solid 1px black; } div { max-width: 200px; } 

HTML

 <div> <span contenteditable="true">sdfsd</span> </div> 

Je viens d'écrire ceci pour vous, j'espère que vous l'aimez 🙂 Pas de garantie qu'il s'agisse de navigateur, mais je pense que c'est 🙂

 (function(){ var min = 100, max = 300, pad_right = 5, input = document.getElementById('adjinput'); input.style.width = min+'px'; input.onkeypress = input.onkeydown = input.onkeyup = function(){ var input = this; setTimeout(function(){ var tmp = document.createElement('div'); tmp.style.padding = '0'; if(getComputedStyle) tmp.style.cssText = getComputedStyle(input, null).cssText; if(input.currentStyle) tmp.style.cssText = input.currentStyle.cssText; tmp.style.width = ''; tmp.style.position = 'absolute'; tmp.innerHTML = input.value.replace(/&/g, "&amp;") .replace(/</g, "&lt;") .replace(/>/g, "&gt;") .replace(/"/g, "&quot;") .replace(/'/g, "&#039;") .replace(/ /g, '&nbsp;'); input.parentNode.appendChild(tmp); var width = tmp.clientWidth+pad_right+1; tmp.parentNode.removeChild(tmp); if(min <= width && width <= max) input.style.width = width+'px'; }, 1); } })(); 

JSFiddle

En savoir plus sur la modification programmatique de l'attribut de taille sur l'entrée?

Semantically (imo), cette solution est meilleure que la solution acceptée car elle utilise toujours des champs de saisie pour l'entrée de l'utilisateur, mais elle introduit un peu de jQuery. Soundcloud fait quelque chose de semblable à celui-ci pour leur étiquetage.

 <input size="1" /> $('input').on('keydown', function(evt) { var $this = $(this), size = parseInt($this.attr('size'), 10), isValidKey = (evt.which >= 65 && evt.which <= 90) || // a-zA-Z (evt.which >= 48 && evt.which <= 57) || // 0-9 evt.which === 32; if ( evt.which === 8 && size > 0 ) { // backspace $this.attr('size', size - 1); } else if ( isValidKey ) { // all other keystrokes $this.attr('size', size + 1); } }); 

http://jsfiddle.net/Vu9ZT/

De: Existe – t-il un plugin jQuery autogrow pour les champs de texte?

Voir une démonstration ici: http://jsbin.com/ahaxe

Le plugin:

 (function($){ $.fn.autoGrowInput = function(o) { o = $.extend({ maxWidth: 1000, minWidth: 0, comfortZone: 70 }, o); this.filter('input:text').each(function(){ var minWidth = o.minWidth || $(this).width(), val = '', input = $(this), testSubject = $('<tester/>').css({ position: 'absolute', top: -9999, left: -9999, width: 'auto', fontSize: input.css('fontSize'), fontFamily: input.css('fontFamily'), fontWeight: input.css('fontWeight'), letterSpacing: input.css('letterSpacing'), whiteSpace: 'nowrap' }), check = function() { if (val === (val = input.val())) {return;} // Enter new content into testSubject var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); testSubject.html(escaped); // Calculate new width + whether to change var testerWidth = testSubject.width(), newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, currentWidth = input.width(), isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) || (newWidth > minWidth && newWidth < o.maxWidth); // Animate width if (isValidWidthChange) { input.width(newWidth); } }; testSubject.insertAfter(input); $(this).bind('keyup keydown blur update', check); }); return this; }; })(jQuery); 

Quelques choses viennent à l'esprit:

Utilisez un gestionnaire onkeydown dans votre champ de texte, mesurez le texte * et augmentez la taille de la zone de texte en conséquence.

Joignez une :focus classe css de :focus dans votre zone de texte avec une plus grande largeur. Ensuite, votre boîte sera plus grande lorsqu'elle sera concentrée. Ce n'est pas exactement ce que vous demandez, mais similaire.

* Il n'est pas simple de mesurer le texte dans javascript. Découvrez cette question pour des idées.

Ici, vous pouvez essayer quelque chose comme ça

EDIT: ÉVENT REVISÉ (ajouté une nouvelle solution) http://jsfiddle.net/jszjz/10/

Explication de code

 var jqThis = $('#adjinput'), //object of the input field in jQuery fontSize = parseInt( jqThis.css('font-size') ) / 2, //its font-size //its min Width (the box won't become smaller than this minWidth= parseInt( jqThis.css('min-width') ), //its maxWidth (the box won't become bigger than this) maxWidth= parseInt( jqThis.css('max-width') ); jqThis.bind('keydown', function(e){ //on key down var newVal = (this.value.length * fontSize); //compute the new width if( newVal > minWidth && newVal <= maxWidth ) //check to see if it is within Min and Max this.style.width = newVal + 'px'; //update the value. }); 

Et le css est très simple aussi

 #adjinput{ max-width:200px !important; width:40px; min-width:40px; font-size:11px; } 

EDIT: Une autre solution est d'avoir le type d'utilisateur qu'il veut et de flou (se concentrer), saisir la chaîne (dans la même taille de police), placez-la dans un div-count, la largeur du div – puis avec une animation agréable avec un cool Effet de relâchement met à jour la largeur des champs d'entrée. Le seul inconvénient est que le champ de saisie restera «petit» pendant que l'utilisateur saisit. Ou vous pouvez ajouter un délai d'attente:) vous pouvez vérifier une telle solution sur le violon ci-dessus aussi!

Si vous définissez la portée à afficher: en ligne, le redimensionnement horizontal et vertical automatique fonctionne très bien:

 <span contenteditable="true" style="display: inline-block; border: solid 1px black; min-width: 50px; max-width: 200px"></span> 

Je sais que c'est un message sérieusement ancien – mais ma réponse pourrait être utile pour les autres de toute façon, alors voici. J'ai trouvé que si ma définition de style CSS pour le div contentatif a une hauteur minimale de 200 au lieu d'une hauteur de 200, alors la div s'élève automatiquement.