Basado en la respuesta de Michael, he creado mi propia versión de esto usando jQuery. Creo que es una versión más limpia / corta de la mayoría de las respuestas aquí y parece hacer el trabajo.
Estoy haciendo lo mismo que la mayoría de las personas aquí usando un espacio para escribir el texto de entrada y luego obtener el ancho. Luego estoy configurando el ancho cuando se llaman las acciones keyup
y blur
.
Aquí hay un codepen que funciona . Este codepen muestra cómo se puede usar con múltiples campos de entrada.
Estructura HTML:
<input type="text" class="plain-field" placeholder="Full Name">
<span style="display: none;"></span>
jQuery:
function resizeInputs($text) {
var text = $text.val().replace(/\s+/g, ' '),
placeholder = $text.attr('placeholder'),
span = $text.next('span');
span.text(placeholder);
var width = span.width();
if(text !== '') {
span.text(text);
var width = span.width();
}
$text.css('width', width + 5);
};
La función anterior obtiene el valor de las entradas, recorta los espacios adicionales y establece el texto en el intervalo para obtener el ancho. Si no hay texto, obtiene el marcador de posición y lo ingresa en el intervalo. Una vez que ingresa el texto en el intervalo, establece el ancho de la entrada. El + 5
ancho es porque sin eso la entrada se corta un poco en el navegador Edge.
$('.plain-field').each(function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('keyup blur', function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('blur', function() {
var $text = $(this).val().replace(/\s+/g, ' ');
$(this).val($text);
});
Si esto pudiera mejorarse, avíseme, ya que esta es la solución más limpia que se me ocurrió.