web-dev-qa-db-fra.com

jQuery - redimensionner l'entrée de formulaire en fonction de la largeur de la valeur?

Est-il possible d'obtenir la largeur de la valeur d'entrée et de redimensionner celle-ci de manière dynamique afin que la valeur tienne?

Voici un exemple:

http://jsfiddle.net/bzBdX/2/

jqueryformsinputresize
12
Wordpressor

Voici le code jQuery:

$('input').each(function(){
var value = $(this).val();
var size  = value.length;
// playing with the size attribute
//$(this).attr('size',size);

// playing css width
size = size*2; // average width of a char
$(this).css('width',size*3);

})​;

http://jsfiddle.net/bzBdX/7/

9
David Laberge

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

Il reflète la valeur de l'entrée afin qu'il puisse calculer la longueur réelle au lieu de deviner ou d'autres approches mentionnées.

Vous pouvez voir un exemple en direct ici: http://jsfiddle.net/jw9oqz0e/

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 min/max-width et utilisez une transition sur la largeur si vous voulez un effet Nice.

Vous pouvez spécifier l'espace/la distance jusqu'à la fin en tant que valeur en notation json pour l'attribut data-autosize-input sur l'élément input.

Bien sûr, vous pouvez aussi simplement l'initialiser en utilisant jQuery

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

Les réponses actuelles étaient trop compliquées. Heres un rapide

$('#myinput').width($('#myinput').prop('scrollWidth'))

L'ajout de ce qui précède pour la saisie d'événements Keydown/Up/Press est trivial. Testé en chrome

6
Ahmed-Anas

Comme mentionné par @ManseUK. Cette ligne a fonctionné pour moi. JQuery version 1.8

$ ('# resizeme'). css ({width: newwidth});

1
Manish Gupta

Toutes les solutions basées sur le nombre de caractères sont assez faibles, car chaque caractère peut avoir une largeur différente s'il ne s'agit pas d'une police monotype. Je résous ce problème en créant une div contenant une valeur d’entrée de texte avec les mêmes propriétés de police et en obtenant sa largeur.

Quelque chose comme ça:

function resizeInput() {
    $('body').append('<div class="new_width">'+$(this).val()+'</div>');
    $(this).css('width', $('.new_width').width());
    $('.new_width').remove()
}
$('input')
    // event handler
    .keyup(resizeInput)
    // resize on page load
   .each(resizeInput);
1
Alexandr K

http://jsfiddle.net/bzBdX/11/

Donc, j'ai fait un exemple où il essaie de calculer la largeur en insérant des lettres dans une étendue et en calculant la largeur

(function() {
    var mDiv = $("<span />").text("M").appendTo("body"),
        mSize = mDiv.width();
    mDiv.detach();

    var letterSize = function(s) {
        var sDiv = $("<span />").text("M" + s + "M").appendTo("body"),
            sSize = sDiv.width();

        sDiv.detach();

        return (sSize - (mSize * 2)) * 0.89;
    };

    $("input[data-resise-me]").each(function() {
        var minSize = $(this).width();

        var resizeInput = function() {
            var calcSize = $.map($(this).val(), letterSize);
            var inputSize = 0;
            $.each(calcSize, function(i, v) { inputSize += v; });

            $(this).width( inputSize < minSize ? minSize : inputSize );
        };

        $(this).on({ keydown: resizeInput, keyup: resizeInput });
    });
} ());

Il y a probablement une bien meilleure façon de le faire.

1
megakorre

Quelque chose de simple:

$('#resizeme').keydown(function(){  // listen for keypresses
 var contents = $(this).val();      // get value
 var charlength = contents.length;  // get number of chars
 newwidth =  charlength*9;          // rough guesstimate of width of char
 $(this).css({width:newwidth});     // apply new width
});​

Vous pouvez changer le multiplicateur de préférence personnelle/taille du texte

Exemple: http://jsfiddle.net/bzBdX/6/

1
ManseUK
$(function(){
    $("input").keyup(function(){
        $(this).stop().animate({
        width: $(this).val().length*7
    },100)                
    })
})​
1
Yorgo

cet exemple comme cela a été testé sur Chrome 25 et Firefox 19. ( http://jsfiddle.net/9ezyz/ )

function input_update_size()
{
    var value = $(this).val();
    var size  = 12;

    // Looking for font-size into the input
    if (this.currentStyle)
        size = this.currentStyle['font-size'];
    else if (window.getComputedStyle)
        size =  document.defaultView.getComputedStyle(this,null).getPropertyValue('font-size');
    $(this).stop().animate({width:(parseInt(size)/2+1)*value.length},500);
    //$(this).width((parseInt(size)/2+1)*value.length);
}

$('input')
    .each(input_update_size)
    .keyup(input_update_size);
0
ImmortalPC