web-dev-qa-db-fra.com

jQuery - saisie de texte de taille automatique (pas de zone de texte!)

Comment redimensionner automatiquement le champ type d'entrée = "texte" avec jQuery? Je veux que ce soit comme 100px de large au début, puis faites-le s'élargir automatiquement en tant que texte d'entrée utilisateur ... est-ce possible?

jqueryhtmlinput
40
migajek

Voici un plugin qui fera ce que vous recherchez:

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,' ').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);

EDIT: Trouvé sur: Existe-t-il un plugin de croissance automatique jQuery pour les champs de texte?

64
seize

Je ne pense pas qu'il existe une solution parfaite à ce problème car vous ne pouvez pas détecter la largeur réelle du texte entré dans l'élément d'entrée. Tout dépend de la police que vous utilisez, des paramètres de zoom dans le navigateur, etc.

Cependant, si vous pouvez choisir une police où vous pouvez réellement calculer le nombre de pixels du texte (c'est la partie la plus difficile mais je suppose que vous pouvez essayer de l'estimer d'une manière ou d'une autre). Vous pouvez l'utiliser pour modifier la largeur de votre champ de saisie.

 $('input').keyup(function () {
     // I'm assuming that 1 letter will expand the input by 10 pixels
     var oneLetterWidth = 10;

     // I'm also assuming that input will resize when at least five characters
     // are typed
     var minCharacters = 5;
     var len = $(this).val().length;
     if (len > minCharacters) {
         // increase width
         $(this).width(len * oneLetterWidth);
     } else {
         // restore minimal width;
         $(this).width(50);
     }
 });
10
RaYell

(Modifié: en utilisant la méthode .text() au lieu de .html() pour obtenir un formatage correct.)

Bonjour, je ne sais pas si vous cherchez toujours mais je suis tombé sur cela quand je cherchais un script pour faire la même chose. J'espère donc que cela aidera quiconque essaie de le faire, ou quelque chose de similaire.

function editing_key_press(e){
    if(!e.which)editing_restore(this.parentNode);
    var text = $('<span>')
        .text($(this).val())
        .appendTo(this.parentNode);
    var w = text.innerWidth();
    text.remove();
    $(this).width(w+10);
}

La logique de ce code est de mettre le contenu sur la page dans un intervalle, puis obtient la largeur de ce contenu et le supprime. Le problème que j'ai eu, c'est que je devais le faire fonctionner à la fois sur keydown et keyup pour qu'il fonctionne correctement.

J'espère que cela aide, peut-être pas, car je ne fais que du jquery depuis peu de temps.

Merci

George

8
thor222

J'ai un plugin jQuery sur GitHub: https://github.com/MartinF/jQuery.Autosize.Input

Il utilise la même approche que la réponse de seize mais a certains des changements mentionnés dans les commentaires.

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 utilisez simplement css pour définir la largeur min/max et utilisez une transition sur la largeur si vous voulez un effet Nice.

Vous pouvez spécifier l'espace/la distance jusqu'à 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 également l'initialiser à l'aide de jQuery

$("selector").autosizeInput();
6
MartinF

J'ai utilisé réponse de seize , mais j'ai apporté ces modifications:

  • Entre le paramètre isValidWidthChange et // Animate width:

    if (!isValidWidthChange && newWidth > minWidth && newWidth > o.maxWidth) {
    newWidth = o.maxWidth;
    isValidWidthChange = true;
}

    De cette façon, l'entrée augmentera aussi grand que vous l'avez autorisé lorsque son contenu est trop grand pour tenir dans la largeur maximale.

  • Après $(this).bind('keyup keydown blur update', check);:

    // Auto-size when page first loads
check();
2
Sarah Vessels

Voir ce plugin jQuery: https://github.com/padolsey/jQuery.fn.autoResize

Je viens de le tester avec des textareas et ça marche! Prend en charge la croissance automatique des zones de texte, saisissez [type = texte] et saisissez [type = mot de passe].

UPD. On dirait que l'auteur d'origine a supprimé le dépôt de github. Le plugin n'a pas été mis à jour depuis longtemps et s'est avéré être assez bogué. Je ne peux que vous suggérer de trouver une meilleure solution. J'ai fait une demande d'extraction à ce plugin il y a quelque temps, donc j'ai ne copie de celui-ci dans mon compte github, ne l'utilise que si vous voulez l'améliorer, c'est pas pare-balles !

En outre, j'ai trouvé que le framework ExtJS a une implémentation de redimensionnement automatique pour les champs de texte, voir la propriété de configuration grow. Bien qu'il ne soit pas si facile de découper ce petit morceau de logique hors du cadre, cela peut vous donner de bonnes idées sur l'approche.

1
Dmitry Pashkevich

Essayez ce code:

var newTextLength = Math.floor($("input#text).val() * .80);
$("input#text").attr("size",newTextLength);
0
user3470283

Je pensais juste à la même chose. La zone de texte doit se redimensionner automatiquement lorsque l'utilisateur y écrit du texte. Je ne l'ai jamais utilisé, mais j'ai une idée de comment le faire. Quelque chose comme ça:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>

  <table border="1">
  <tr>
    <td>
      <span id="mySpan">
        <span id="mySpan2"></span>
        <input id="myText" type="text" style="width:100%" onkeyup="var span = document.getElementById('mySpan2');var txt = document.getElementById('myText'); span.innerHTML=txt.value;">
       </span>
    </td>
    <td>
            sss
    </td>
  </tr>
</table>

  </body>
</html>
0
Racky

Par défaut, la largeur d'entrée est contrôlée par le paramètre taille , qui pour type="text" correspond au nombre de caractères de large qu'il devrait être.

Étant donné que cela est mesuré en caractères et non en pixels, la taille réelle des pixels est contrôlée par la police (à largeur fixe) utilisée.

0
Powerlord