Cambiar el tamaño de la entrada para que se ajuste a su contenido

Question

No me importa una tecnología específica, podría ser JS, CSS o incluso algunos atributos html no estándar y malvados. Solo quiero que input crezca si el usuario escribe sobre el borde derecho.

Answer 1

Tal vez alguien tiene una mejor manera, pero se puede intentar esto:

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

Esto establece en un tamaño mínimo de 10 y se expande si vas más allá de 10 caracteres.

funciona Probablemente es mejor con una fuente de ancho fijo:

input { 
    font-family:Courier; 
} 

Answer 2

Deje el navegador haga el cálculo de la anchura mediante el uso de un conjunto div con contenteditable a true.

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

No debe haber problemas con el apoyo del navegador http://caniuse.com/#feat=contenteditable

Answer 3

También puede crear div elemento, copiar su estilo de entrada a ella y utilizar sus dimensiones para cambiar el tamaño de entrada. (Elegido múltiples usos 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: mejor usar pre en lugar de div para seguir el tamaño de los espacios.