Onclick Développer Taille de la boîte de texte

Question

Je souhaite utiliser jQuery pour étendre la largeur d'une zone de saisie lors d'un clic. Par exemple, si l'entrée a une largeur par défaut de 100 px, lorsque l'utilisateur clique dessus pour la saisir, elle s'étendra jusqu'à 150 px de largeur.

Est-ce possible?

Merci.

Answer 1

Voici un updated example sur jsFiddle qui anime, et retourne à la taille par défaut sur le flou. Pour référence, voir jQuery Animate docs.

Answer 2

bien sûr. Disons que vous avez

<input id="mytextbox" /> 

vous pouvez faire

$("#mytextbox").focus(function(){ 
    $(this).width(150) 
}); 

Answer 3

Voici un exemple de travail basé sur l'exemple de @ wsanville avec le délai demandé. (Note I a également ajouté un effet à ce retour sur la perte de mise au point, vous pouvez supprimer si facilement)

Working Example

** modifié la taille de la zone de texte

Answer 4

<input type="text" id="tbText" size="30px"/>  

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#tbText').focus(function() { 
      $('#tbText').css("width", "250px"); 
     }); 
     $('#tbText').blur(function() { 
      $('#tbText').css("width", "150px"); 
     }); 
    }); 
</script> 

Answer 5

Je voudrais construire sur l'exemple de @ wsanville en supprimant l'étape supplémentaire sur la sauvegarde de la taille d'origine. L'animation prend également des valeurs de chaîne comme '+ = 50' ou '- = 50' pour augmenter/diminuer la largeur.

See in in action on jsfiddle

$('#box').focus(function() 
{ 
    $(this).animate({ width: '+=50' }, 'slow'); 
}).blur(function() 
{ 
    $(this).animate({ width: '-=50' }, 'slow'); 
}); 

Answer 6

Je sais que c'est un peu en retard à la fête, mais si quelqu'un veut une solution pure CSS qui utilise le: attribut de mise au point.

#textbox { 
    width:100px; 
    transition: 0.5s; 
} 

#textbox:focus { 
    width:150px; 
    transition: 0.5s; 
} 

Il est mon jsFiddle:

https://jsfiddle.net/qo95uquv/

Tom