it-swarm.com.de

jQuery - Größe der Formulareingabe basierend auf der Breite des Werts ändern?

Ist es möglich, die Wertebreite der Eingabe zu ermitteln und die Größe der Eingabe dynamisch zu ändern, damit der Wert passt?

Hier ist ein Beispiel:

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

12
Wordpressor

Hier ist der jQuery-Code:

$('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

Ich habe ein jQuery-Plugin auf GitHub: https://github.com/MartinF/jQuery.Autosize.Input

Es spiegelt den Wert der Eingabe wider, sodass die tatsächliche Länge berechnet werden kann, anstatt zu raten oder andere Ansätze zu nennen.

Sie können ein Live-Beispiel hier sehen: http://jsfiddle.net/jw9oqz0e/

Beispiel:

<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;    
}

Mit css können Sie nur die minimale/maximale Breite festlegen und einen Übergang für die Breite verwenden, wenn Sie einen Nizza-Effekt wünschen.

Sie können den Abstand zum Ende als Wert in JSON-Notation für das Attribut data-autosize-input des Eingabeelements angeben.

Natürlich können Sie es auch einfach mit jQuery initialisieren

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

Aktuelle Antworten waren zu kompliziert. Hier ist eine schnelle

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

Das oben Gesagte zum Eingeben von Tastendrücken/Hoch/Drücken-Ereignissen hinzuzufügen, ist trivial. In Chrom getestet

6
Ahmed-Anas

Wie von @ManseUK erwähnt. Diese Linie hat bei mir funktioniert. JQuery Version 1.8

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

1
Manish Gupta

Alle diese Lösungen, die auf der Anzahl der Zeichen basieren, sind recht schwach, da jedes Zeichen eine andere Breite haben kann, wenn es sich nicht um eine Monotype-Schriftart handelt. Ich löse dieses Problem, indem ich ein Div erstelle, das einen Wert für die Texteingabe mit denselben Schrifteigenschaften enthält, und dessen Breite der erforderlichen entspricht.

Etwas wie das:

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/

Also habe ich ein Beispiel gemacht, in dem versucht wird, die Breite zu berechnen, indem Buchstaben in einen Bereich eingefügt und dort die Breite berechnet werden

(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 });
    });
} ());

Es ist wahrscheinlich ein viel besserer Weg, dies zu tun.

1
megakorre

Etwas einfaches:

$('#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
});​

Sie können den Multiplikator nach persönlicher Präferenz/Textgröße ändern

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

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

dieses Beispiel wurde unter Chrome 25 und Firefox 19 getestet. ( 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