javascript - style - Obtenga ancho de texto de entrada al escribir

input type text css

Question

Tengo un texto tipo de entrada

<input type="text" id="txtid">

Cuando comienzo a escribir texto dentro de la entrada, debería ser capaz de obtener la longitud del texto ingresado.

Esto es lo que intenté:

document.getElementById("txtid").offsetWidth;

y

var test = document.getElementById("txtid");
var width = (test.clientWidth + 1) + "px";

Estos dos no dan el ancho del texto ingresado

Básicamente lo que quiero es:

Para suponer que input text ancho del input text es 320px . Necesito el ancho del texto ingresado, es decir 120px , que sigue cambiando cuando ingreso.

Answer 1

El measureText() Canvas measureText() puede ser útil en tal caso. Llame a la siguiente función cada vez que necesite obtener el ancho de su texto:

function measureMyInputText() {
    var input = document.getElementById("txtid");
    var c = document.createElement("canvas");
    var ctx = c.getContext("2d");
    var txtWidth = ctx.measureText(input.value).width;

    return txtWidth;
}

Para obtener un resultado más preciso, puede configurar el estilo de fuente en el lienzo, especialmente si establece algunas propiedades de fuente en la entrada. Use la siguiente función para obtener la fuente de entrada:

 function font(element) {
     var prop = ["font-style", "font-variant", "font-weight", "font-size", "font-family"];
     var font = "";
     for (var x in prop)
         font += window.getComputedStyle(element, null).getPropertyValue(prop[x]) + " ";

     return font;
 }

Luego, agregue esta línea a la función frist:

ctx.font = font(input);

Answer 2

He modificado ligeramente la respuesta de Chillers, porque parece que querías el ancho en lugar del recuento de letras. Creé un tramo, que está completamente posicionado fuera de la pantalla. Luego agrego el valor de la entrada y luego obtengo el ancho del lapso. Para hacerlo más elegante, podrías crear el lapso con javascript.

Tenga en cuenta que la entrada y el lapso deben tener el mismo estilo de CSS para que esto sea preciso.

document.getElementById("txtid").addEventListener("keyup", function(){
  var mrspan = document.getElementById("mrspan");
  mrspan.innerText = this.value;
  console.log(mrspan.offsetWidth + "px");
});

<input type="text" id="txtid">
<span id="mrspan" style="position:absolute;left:-100%;"></span>

Answer 3

ACTUALIZAR

Dos cosas que quiero presentar

• Hacer display none no le dará ningún offsetWidth si estamos intentando usar vanilla JS. podemos usar visibility: hidden; u opacity:0 para eso.

• necesitamos agregar overflow:auto al span oculto o de lo contrario el texto se convertirá en la línea siguiente si excede el ancho de la ventana del navegador y el ancho permanecerá fijo ( ancho de la ventana )

ANTIGUO

Puedes probar este enfoque

Agregue un tramo y escóndalo

<span id="value"></span>

y luego onkeyup agrega el texto del campo de texto en tu tramo oculto y obtiene su ancho.

CON LA AYUDA DE JQUERY

SNIPPET ( ACTUALIZADO )

function update(elm,value) {
     $(''#value'').text(value);
     var width =   $(''#value'').width();
     $(''#result'').text(''The width of ''+ value +'' is ''+width +''px'');
   
}

#value{
  display:none;
  overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" oninput=''update(this,this.value)''>
<span id="value"></span>
<div id="result"></div>

USANDO JS SOLAMENTE

SNIPPET ( ACTUALIZADO )

function update(elm,value) {
     var span = document.getElementById(''value'');
     span.innerHTML = value;    
     var width = span.offsetWidth;
     document.getElementById(''result'').innerHTML = ''The width of ''+ value +'' is ''+ width+ ''px'';
   
}

#value{
  opacity:0;
  overflow:auto;
}

<input type="text" oninput=''update(this,this.value)''>
<span id="value"></span>
<div id="result"></div>

Answer 4

Veo dos maneras.

Primero :

Puede utilizar un div con contenido editable en su lugar de entrada. De esta manera, puedes ver el ancho del div. Y puede insertar el texto en una entrada oculta.

var elemDiv = document.getElementById(''a''),
  elemInput = document.getElementById(''b'');

elemDiv.onblur = function() {
  elemInput.value = elemDiv.innerHTML;
  console.log(elemDiv.clientWidth + ''px'');
}

div {
  width: auto;
  display: inline-block;
}

<div id=''a'' contenteditable="true">Test</div>
<input id=''b'' type=''hidden''>

Segundo :

Puedes usar la misma lógica, pero la inversión. Use un tipo de texto de entrada y pase el contenido a un div invisible.

var elemDiv = document.getElementById(''a''),
  elemInput = document.getElementById(''b'');

elemInput.oninput = function() {
  elemDiv.innerText = elemInput.value;
  console.log(elemDiv.clientWidth + ''px'');
}

.div {
  width: auto;
  display: inline-block;
  visibility: hidden;
  position: fixed;
  overflow:auto;
}

<input id=''b'' type=''text''>
<div id=''a'' class=''div''></div>

Nota : para la última manera, debe tener la misma fuente y tamaño de letra en las etiquetas de input y div .
Nota 2 : Como dice @Leon Adler, la primera forma permite pegar imágenes, tablas y formatear desde otros programas. Así que tal vez necesites un poco de validación con javascript para verificar el contenido antes de obtener el tamaño.