All geek questions in one place

Dynamically change the font size of the input text box to fill in the sizes

I want to change the font size in <input type="text" size="10> dynamically to fill the field. Here are a few examples:

With fewer characters:

enter image description here

With a lot of characters:

enter image description here

Is it possible?

+6
source share
2 answers

I know that JQuery and JavaScript were not mentioned or tagged, but for what you need JavaScript, and the JQuery.InputFit plugin will do exactly what you want:

 <input type="text" name="younameit" id="input"> <script type="text/javascript"> $('input').inputfit(); </script>
+4
source

I'm a little late to this question, but want to offer a solution if you don't want to use jquery just for this:

 <p>A function is triggered when the user releases a key in the input field. The function transforms the characters size.</p> Enter your name: <input type="text" id="fname" onkeyup="myFunction()"> function myFunction(){ var x=document.getElementById("fname"); var initialSize=25-x.value.length; initialSize=initialSize<=10?10:initialSize; x.style.fontSize = initialSize + "px"; }

check out this jsfiddle

+2
source

Source: https://habr.com/ru/post/945815/

More articles:


All Articles