0
votes

Faire la taille de la police d'entrée HTML diminuant comme davantage de type est dactylographié

J'ai un champ de texte HTML de 3 caractères. Si l'utilisateur tape 4 caractères, je veux que la taille de la police soit rétrécie afin que les quatre caractères soient adaptés.

Acrobat a ce comportement pour les formulaires. Je veux ce comportement en HTML.

C'est-à-dire que si j'ai un champ de texte avec 3 caractères:

et les types d'utilisateurs A 4, je veux que le texte se rétrécit:

html css responsive-design text

1 commentaires

Vous ne pouvez le faire que avec JS, il existe une telle fonctionnalité dans HTML / CSS

3 Réponses :

1
votes

Je pense que ce que vous voulez peut être fait avec des méthodes javascript très simples. Mais malheureusement, il n'y a pas de méthode de faire cela dans HTML ou CSS. Ce code suivant est quelque chose que j'ai trouvé, fait par u / adastio. Sur github.

<script>
  window.fitText( document.getElementById("responsive_headline") );
</script>

window.fitText( document.getElementById("responsive_headline"), 1.2 );
 // turn the compressor up (font will shrink a bit more aggressively)
window.fitText( document.getElementById("responsive_headline"), 0.8 ); 
// turn the compressor down (font will shrink less aggressively)

0 commentaires

1
votes

Ceci n'est pas possible avec HTML / CSS - Cette solution utilise JS + JQuery

trouvé ceci: https://github.com/vxsx/jquery.inputfit.js Démo: http://vxsx.github.io/jquery.inputfit.js/ xxx

1 commentaires

Très la solution simple! Merci.

1
votes

Vous devez utiliser JavaScript. Cela fonctionne en vérifiant si l'entrée peut faire défiler, et si cela peut, cela signifie que le contenu a débordé, auquel cas la taille de la police devrait devenir plus petite.
J'espère que cela aide!

Type Here -> <input type="text" id="myInput" onkeypress="changefontsize()" onchange="changefontsize()">

0 commentaires