Je me demandais simplement comment redimensionner dynamiquement une entrée lorsque vous la saisissez? Je voudrais utiliser jQuery si possible & Je préfère que ce soit un petit script plutôt qu'un plugin volumineux.Redimensionner dynamiquement l'entrée
S'il vous plaît laissez-moi savoir, Matt Mueller
J'ai trouvé celui-léger. Ceci est pour textareas
Version complète: ~ 4k
minified: ~ 1k
Voici une solution
$('input[type="text"]').keyup(function(){
$(this).attr({width: 'auto', size: $(this).val().length});
});
Je vais essayer et vous le faire savoir. Merci! – Matt
J'ai juste essayé ceci et cela fonctionne. Mais assurez-vous que vous ne remplissez pas la taille avec CSS, ou cela ne fonctionnera pas. – Serrano
Notez que cela ajoute trop d'espace si vous utilisez une police à largeur variable. Essayez de taper 'iiiiiiiii' dans le champ pour le tester. – Mark
rapide (non testé) J'ai un plugin jQuery GitHub: https://github.com/MartinF/jQuery.Autosize.Input
Il est d'environ 1,6 kb minifié.
Vous pouvez voir un exemple en direct ici: http://jsfiddle.net/mJMpw/6/
Exemple:
<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />
input[type="data-autosize-input"] {
width: 90px;
min-width: 90px;
max-width: 300px;
transition: width 0.25s;
}
Vous venez d'utiliser css pour régler min/max largeur et utiliser une transition sur la largeur si vous voulez un bel effet .
Vous pouvez spécifier l'espace/la distance à la fin comme valeur en notation json pour l'attribut data-autosize-input sur l'élément d'entrée.
Bien sûr, vous pouvez aussi simplement l'initialiser en utilisant jQuery
$("selector").autosizeInput();
je en ai besoin pour les entrées non pour textareas. J'ai vérifié celui-là aussi. On dirait qu'il base son redimensionnement du nombre de fois que vous frappez retour .. cela ne fonctionnera pas. Je veux qu'il se redimensionne correctement lorsqu'il atteint la fin de la zone de saisie. – Matt
Ce lien ne fonctionne plus ... il renvoie une page 404. –