0

Necesito crear una función que cuando el valor de un <input type="text"> sea mayor que su ancho, disminuya el font-size del input para que quepa todo el contenido (todo ello dinámicamente).

No quiero usar plugins ya creados y no puedo usar max-length, size, etc de HTML.

¿Alguien sabe cómo podría hacerlo?

<input type="text" class="nombre" />
5
  • 1
    Podrías añadir qué has intentado y te ha fallado. el 5 jun. 2017 a las 11:53
  • No sería mejor ajustar el ancho del input en vez del tamaño de su fuente? Ya que si pones un texto más o menos largo la letra sería casi imposible de leer...
    – lromeraj
    el 5 jun. 2017 a las 12:20
  • Te recomiendo que reconsideres la propuesta, ya que es poco practico y queda horrible la solución. Te lo digo por que tengo el código del que necesitas, pero es poco practico. el 5 jun. 2017 a las 13:11
  • y si lo ves desde un movil? no se podra leer la letra..,por qué quieres hacer esto? tal vez exista una alternativa mas practica y con mejores resultados si conocemos tus intenciones el 5 jun. 2017 a las 18:30
  • Te he dejado un ejemplo que hace lo que quieres, Saludos!! ;))..
    – fwBasic
    el 5 jun. 2017 a las 22:28

3 respuestas 3

1

una forma sencilla es usando y usar measureText para obtener dimensiones del texto como ancho y alto.

Ejemplo

const inputs = Array.from(document.querySelectorAll('.input'))
inputs.forEach(input => (
  input.addEventListener('input', e => {
    const { family, size, weight, style } = getFontStyle(input)
    const fontStyle = `${style} ${size} ${family}`
    const len = getStringWidth(input.value, fontStyle)
    const width = input.clientWidth
    if (len > width) {
      const exp = new RegExp(/\d+/)
      input.style.fontSize = (Number(size.match(exp)[0]) - 1) + 'px'
    }
  })
))

function getStringWidth(str, fontStyle) {
  const canvas = document.createElement('canvas')
  const context = canvas.getContext('2d')
  context.font = fontStyle
  const metrics = context.measureText(str);
  return metrics.width
}

function getFontStyle(el) {
  const computed = getComputedStyle(el, null)
  const family = el.style.fontFamily || computed.getPropertyValue('font-family')
  const size = el.style.fontSize || computed.getPropertyValue('font-size')
  const weight = el.style.fontWeight || computed.getPropertyValue('font-weight')
  const style = el.style.fontStyle || computed.getPropertyValue('font-style')
  return { family, size, weight, style }
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  padding-top: 25px;
}
.input {
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.06) inset;
  color: #555;
  font-size: 14px;
  padding: 8px;
  width: 200px;
}
.input:focus {
  border-color: rgba(0, 188, 255, .8);
  outline: none;
}
<input type="text" class="input" placeholder="Enter your name" />

En el ejemplo que he puesto, primero se intenta obtener los estilos de fuente directamente del elemento y, en caso no existan, se obtiene de forma computada (que están añadidos mediante ). Esto es importante porque una vez que el texto sobrepasa el ancho de la caja de texto (debe tener un ancho fijo) se disminuye la fuente en 1px y se añade directamente sobre el elemento mediante el atributo style. Como observación, debes usar clientWidth ya que si usas offsetWidth tomarías el ancho total de la caja de texto, lo que incluye su padding.

0

Puedes utilizar algo asi :

function fontSizeInput(){
    var input = document.getElementById("fname");
    //console.log(input.value.length);
    var initialSize = 25 - input.value.length;
    initialSize = initialSize <= 10 ? 10:initialSize;
    input.style.fontSize = initialSize + "px";
}
<input type="text" id="fname" onkeyup="fontSizeInput()">

Se toma el valor inicial del input, que es 0 y se establece una cantidad que en este caso es 25. Cuando el largo del valor del input es menor o igual a 10. El valor siempre sera 10. Mientras sea mayor seguira tomando el resultado de la resta de 25 - input.length. Finalmente se carga al style del input el fontsize de ese valor initialSize

0

El siguiente ejemplo te muestra como cambiar el tamaño de la fuente mientras escribes para adaptarlo al tamaño de la caja del input.

Ejemplo:

document.querySelectorAll("input")
.forEach(function(i) {
 i.addEventListener("keyup",compressInput)
});
function compressInput(event) {
 var e = event.target;
 if (!e.style.width) {
  e.style.width  = e.offsetWidth  + "px";   // Fija el Tamaño del Ancho 
  e.style.height = e.offsetHeight + "px";   // Fija el Tamaño del Alto
  e.dataset.fontSize = fontSize(e);    // Determina el tamaño de la Fuente
 }
 var f = e.dataset.fontSize * (e.value.length + 1) / 2;
 e.style.fontSize = (f > e.offsetWidth)
  ? e.offsetWidth / (e.value.length + 1) * 2 + "px"
  : e.dataset.fontSize + "px";
}

// Calcula el Tamaño de la Fuente
function fontSize(e) {
 var ex = /font\-size:[\s+]?(\d+)px/i;
 var fontSize = ex.exec(e.style.cssText);
 if (fontSize == null) {
  CLASS: {
   for(var x=0; x<e.classList.length; x++) {
    var css = e.classList[x];
    for(var y=0; y<document.styleSheets.length; y++) {
     var sheet = document.styleSheets[y].cssRules;
     for(var z=0; z<sheet.length; z++) {
      if(sheet[z].selectorText == "."+css) {
       ex = /[\s+]?(\d+)px/ig;
       fontSize = ex.exec(sheet[z].style.fontSize);
       break CLASS;
 }}}}}}
 if(fontSize == null)
  fontSize = "12";
 else
  fontSize = fontSize[1];

 return fontSize;
}
.font-size-18 {
 font-size:18px;
}
<p>fontSize 12px (by Default)<br>
<input type="text"></p>

<p>fontSize 18px (by Class)<br>
<input type="text" class="font-size-18"></p>

<p>fontSize 24px (by Style)<br>
<input type="text" style="font-size:24px"></p>

Espero esto te sirva, Saludos!! ;))...

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.