Créer une zone de texte avec une largeur d'agrandissement automatique?

Question

Comment procéder pour créer une zone de texte avec une largeur d'expansion automatique adaptée à son contenu?

Je continue à trouver beaucoup d'informations sur les expansions basées sur la hauteur, mais pas beaucoup sur la largeur.

Je voudrais aussi qu'il s'applique à toutes les zones de texte sur la page et pas seulement celles spécifiques.

Answer 1

Vous ne savez pas si c'est ce que vous aviez en tête, mais cela ne devrait-il pas fonctionner?

<script language="javascript"> 
function expand(f) 
{ 
    f.size = f.size + 1; 
} 
</script> 

<input type="text" size="20" onkeyup="expand(this)" /> 

Answer 2

Si vous voulez utiliser backspace la gestion des clés ceci:

<input type="text" value="Sample text" onkeyup="(event.keyCode!==8)?this.size++:this.size--;" size="20"> 

Si vous voulez la manipulation Backspace et d'ignorer les touches fléchées utiliser celle-ci:

<input type="text" value="Sample text" onkeyup="if(event.keyCode==8){this.size--;}else if(event.keyCode!==37&&event.keyCode!==38&&event.keyCode!==39&&event.keyCode!==4‌​0){this.size++;}" size="6"> 

Answer 3

Je pense une meilleure solution serait de vérifier la longueur du texte et de modifier la zone de texte si le texte était trop long plutôt que de vérifier chaque type d'événement clé qui ne devrait pas déclencher une expansion. Un exemple:

<script type="text/javascript"> 
function expand(textbox){ 
    var minSize = 20; 
    var contentSize = textbox.value.length; 
    if(contentSize > minSize) 
    { 
     textboxSize = contentSize; 
    } 
    else 
    { 
     textboxSize = minSize; 
    } 
} 
</script> 
<input type="text" size="20" onkeyup="expand(this)" />