Größe ändern Eingang zu seinem Inhalt

Question

Ich interessiere mich nicht für eine bestimmte Technologie, es könnte JS, CSS oder sogar einige unstandardmäßige und böse HTML-Attribute sein. Ich möchte nur die input größer werden, wenn der Benutzer über die rechte Grenze eingibt.

Answer 1

Vielleicht hat jemand anderes hat eine bessere Art und Weise, aber man könnte versuchen, diese:

Beispiel:http://jsfiddle.net/aAueA/1/

var input = document.getElementsByTagName('input')[0]; 

input.onkeypress = input.onkeydown = function() { 
    this.size = (this.value.length > 10) ? this.value.length : 10; 
}; 

Dies setzt es bei einer Mindestgröße von 10 und dehnt sich, wenn Sie über 10 gehen Figuren.

Wahrscheinlich funktioniert am besten mit einer Schrift mit fester Breite:

input { 
    font-family:Courier; 
} 

Answer 2

Lassen Sie den Browser, um die Berechnung der Breite tun durch ein div mit contenteditable Set true verwenden.

<div class="pseudo-input" contenteditable="true">Resizes to my content!</div> 

Es sollte keine Probleme sein mit Browser-Unterstützung http://caniuse.com/#feat=contenteditable

Answer 3

Sie können auch div Element erstellen, kopieren Sie Ihre Eingabemethode, um es und es zu verwenden, Abmessungen ist Eingabe zu ändern. (Ausgewählte Mehrfachverwendungen this solution).

var input = $('input'), 
    dummy = $('<div style="position:absolute; left: -1000%;">').appendTo('body'); 

['font-size', 'font-style', 'font-weight', 'font-family', 
'line-height', 'text-transform', 'letter-spacing'].forEach(function(index) { 
    dummy.css(index, input.css(index)); 
}); 

input.on('input', function() { 
    dummy.html(this.value); 
    input.width(dummy.width()); 
}); 

UPD: besser vor zu verwenden, anstatt div Räume Größe zu folgen.