2

Tengo varios input de tipo text, lo que quiero hacer es disminuir el tamaño de letra al ingresar texto pero al hacerlo también se reduce el tamaño del input,

¿Cómo puedo hacer para que el input quede del tamaño normal y el texto más pequeño? ¿Es posible ir ingresando texto y que se vaya disminuyendo su tamaño automáticamente?

Mi código:

.formatoReporte .inputNombre{
    width: 300px;
    font-size: 10px;
}
2
  • puedes revisar el siguiente enlace de stackoverflow en ingles: stackoverflow.com/questions/9147333/…
    – cignius
    el 29 ene. 2018 a las 20:00
  • ¿Deseas que el texto se reduzca progresivamente según se escribe? ¿o deseas que se reduzca una vez al escribir y al dejar de escribir vuelva a su tamaño original? el 5 sep. 2018 a las 8:56

4 respuestas 4

2

Entiendo que quieres que haga algo parecido a lo que pasa en instagram, que según escribes se va haciendo mas pequeño para caber en la pantalla.

  1. Consejo, en lugar de usar keypress, usa keydown. De esta manera capturará la tecla de borrado también.
  2. Lo que hago es controlar la cantidad de caracteres que caben mas o menos dentro del input, he probado con la A mayúscula. Con esta fuente las letras no son iguales, si quieres que esto quede bonito deberías de usar una "Fuente" en la que todas sean del mismo ancho.

He basado mi código en alguna respuesta de este post, en el código de la siguiente web y en ESen.

$('#location').keydown(function() {
  
  var textLength = $(this).val().length;
  
  if(textLength <= 16){
      $(this).css('font-size', '100%');
  }else if(textLength > 16 && textLength <= 19) {
      $(this).css('font-size', '85%');
  }else if(textLength > 19 && textLength <= 22) {
      $(this).css('font-size', '70%');
  }else if(textLength > 22) {
      $(this).css('font-size', '65%');
  }
  
 console.log(textLength);
});
#location {
  font-size: 100%;
  outline: none;
  width: 200px;
  height: 30px;
  display: table-cell; 
  vertical-align: middle;
  border: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="location" placeholder="Placeholder Text" maxlength="25" />

0

No se si te entiendo bien, ya que no se si inputNombre es la clase del input o del label, pero te recomiendo que uses padding hasta que quede más o menos del tamaño que estaba antes, así:

.formatoReporte .inputNombre{
  width: 300px;
  font-size: 8px;
  padding: 12px;
}
<form class="formatoReporte">

   <input class="inputNombre" type="text" placeholder="texto"/>
   
   <textarea class="inputNombre" placeholder="texto"></textarea>

</form>

Ahora, no es la mejor forma, pero es que no conozco todo el problema ya que el código que presentas es demasiado vago. Espero te funcione.

Es posible ir ingresando texto y que se vaya disminuyendo su tamaño en automático?

Con respecto a esto último, me temo que no se puede sin javascript, pero puedes usar textarea, en vez de input.

Saludos.

0

Como indican solo con CSS no es posible. Pero la parte de JavaScript apenas te supondrá unas pocas líneas de código para hacer lo que deseas:

var input = document.querySelector('#input')
var fontSize = 50
// Tamaño inicial
input.style.fontSize = `${fontSize}px` 

input.addEventListener('input', () => {
  var l = input.value.length
  var s = (l/5) | 0 // Disminuimos 1px cada 5 caracteres
  input.style.fontSize = `${(fontSize - s) || 1}px`
})
#input{
  /* Importante definir un width y un height para que no se vaya haciendo más pequeño al disminuir el tamaño */
  width: 100%;
  height: 50px;
}
<input id="input" />

0

Es tan simple como text-size y el selector al input type text. Pero ajusta luego los paddings para que quede proporcional al tamaño de la letra.

Con respecto a cada caracter vaya disminuyendo, tal vez tengas que usar js o jquery, dudo que css tenga eso de serie

Tu Respuesta

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

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