¿Cómo calcular el ancho de un elemento HTML de entrada para que coincida con el tamaño de su contenido?

Question

Cómo calcular el ancho de un elemento HTML de entrada para que coincida con el tamaño de su contenido? ya puedo actualizar una entrada sobre la marcha a medida que el usuario escribe:

<input type='text' onkeydown='this.size=this.value.length' /> 

Sin embargo, esto no parece del todo correcta, ya que no tiene en cuenta el hecho de que algunos caracteres son más que otros:

• voy a conseguir más y más espacios en blanco si escribo sólo algunos caracteres "L"
• el tamaño será insuficiente si escribo sólo algunos caracteres "w"

¿Cómo proceder?

PD: ¿Por qué quiero hacer esto (ya respondió esto en una respuesta que se eliminó)? Tengo oraciones en las que tengo que reemplazar el contenido del paréntesis por entradas (por ejemplo: [el usuario] tiene [años]). No tengo idea de lo que puede ser la oración, por lo que no conozco una longitud adecuada para las entradas, y me gustaría mantenerla legible en una línea (evitando demasiados espacios en blanco).

Answer 1

Puede usar un lienzo (oculto) y el measureText() método del contexto para obtener el ancho de su cadena.

EDIT:

Parece fast enough.

Answer 2

En primer lugar, definir un poco de CSS ...

input, 
#input-helper { 
    display: inline; 
    font-size: 14px; 
    font-family: serif; 
    line-height: 16px; 
} 

#input-helper { 
    position: absolute; 
    top: -10000px; 
} 

... a continuación, utilizar algo de JavaScript ...

var div = document.createElement("div"); 
div.id = "input-helper"; 
document.body.appendChild(div); 

var input = document.querySelector("input"); 

input.addEventListener("keyup", function() { 
    div.textContent = this.value; 
    input.style.width = div.offsetWidth + "px"; 
});​ 

jsFiddle.

También querrá elegir un ancho de inicio razonable para su elemento input.

Answer 3

Si usar jQuery no es un problema, he aquí una demostración que preparé en jsFiddle. Utiliza un archivo Autoexpand.js que hace lo que desea. Mira el último ejemplo en el violín.

Algunos detalles:

1. Se basa en .keyup.keypress y para la respuesta más rápida posible.
2. Tiene en cuenta el marcado HTML pegado en el cuadro. Se abordan cosas como los saltos de línea.
3. El archivo de origen muestra un procesamiento inteligente al tomar en consideración todo lo relacionado con la fuente.

También se incluyen en el jsFiddle enlaces para descargar una versión pegada del violín ya que jsFiddle Sandbox se rompe en IE8. Dicho esto, ¡también funciona en IE7 también!

Answer 4

Primero: Añadir este div donde desea

<div id="calcsize" style="display:none;"></div> 

Segundo: Utilice esta función

function getWidthof(txt) 
{ 
    $('#calcsize').empty().append(txt); 
    return $('#calcsize').width(); 
}