How to resize text in a textbox if it is too large till a certain size

Question

https://auth.me.com/authenticate

On this website when you type in your email address , the font-size will automatically be reduced if the email address fills the box size.

enter image description here

How can we do the same using Javascript?
which are the events that are being fired / captured ?

very good question because when you type fs you can go to 36 but with os you can go to 17. So the answers based on the number of letters aren't good. — Alexandre Khoury
– Alexandre Khoury, Commented Jun 17, 2012 at 15:28
I was working for a better solution than the one from Calvein (you can see in his fiddle, when the font-size is small and then you erase what you wrote, the font-size doesn't become bigger). Do I continue, or you will never come here and un-accept the solution from Calvein to accept mine? Please answer. N.B: My solution is really better, believe me. — Alexandre Khoury
– Alexandre Khoury, Commented Jun 19, 2012 at 16:18
@Mageek I will come here as i check stackoverflow very often and stackoverflow have the notification system. — Sarawut Positwinyu
– Sarawut Positwinyu, Commented Jun 20, 2012 at 2:11

score 2 · Accepted Answer · 2012-06-17 14:48:51Z

2

$("input").keypress(function(){ if(this.value.length>43)//or some other value {//do stuff here } });

Keydown is what you are looking for

edited Jun 17, 2012 at 14:48

answered Jun 17, 2012 at 14:43

user1432124

Sign up to request clarification or add additional context in comments.

1 Comment

Pointy Over a year ago

Might be better to use "keypress", as that'll happen after things like the backspace key, etc. Also might be good to handle "cut" and "paste".

Alexandre Khoury · Accepted Answer · 2012-06-24 10:56:41Z

I have made a library, named resize.js, which allow to write:

<input type="text" resize="true" />

This is the library:

var precision=18; window.onload=function() { for(var i=0,t=document.getElementsByTagName("input"),l=t.length;i<l;i++)if(t[i].getAttribute("resize")==="true") { var div=document.createElement("div"); div.setAttribute("style","font-size"+parseInt(t[i].s("font-size"))+";font-family:"+t[i].s("font-family")+";position:absolute;top:-10000px;left:-10000px;"); document.body.appendChild(div); (function(i,div,min,max,dif,l,r,w,h,pre){setInterval(function(){modify(t[i],div,min,max,dif,l,r,w,h,pre);},100);}) ( i, div, t[i].getAttribute("min")||parseInt(t[i].s("font-size"))-3, t[i].getAttribute("max")||parseInt(t[i].s("font-size")), parseInt(t[i].s("padding-left"))+parseInt(t[i].s("padding-right"))+parseInt(t[i].s("border-left-width"))+parseInt(t[i].s("border-right-width"))+precision, parseInt(t[i].s("padding-left")), parseInt(t[i].s("padding-right")), t[i].offsetWidth, t[i].offsetHeight, precision ); } } Object.prototype.s=function(p) { return this.currentStyle?this.currentStyle[p]:document.defaultView.getComputedStyle(this,null).getPropertyValue(p); } function modify(el,c,min,max,dif,l,r,w,h,pre) { el.style.width=w+"px"; el.style.height=h+"px"; c.innerHTML=el.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/ /g,"&nbsp"); var test=c.offsetWidth; while(test>=el.offsetWidth-dif&&parseInt(el.s("font-size"))>min) { el.style.fontSize=parseInt(el.s("font-size"))-1+"px"; c.style.fontSize=el.style.fontSize; test=c.offsetWidth; } while(test<el.offsetWidth-dif&&parseInt(el.s("font-size"))<max) { el.style.fontSize=parseInt(el.s("font-size"))+1+"px"; c.style.fontSize=el.style.fontSize; test=c.offsetWidth; } if(parseInt(el.s("font-size"))===min&&c.offsetWidth>el.offsetWidth-dif) { el.style.paddingLeft="0px"; el.style.paddingRight="0px"; } else { el.style.paddingLeft=l+"px"; el.style.paddingRight=r+"px"; } }

A fiddle: http://jsfiddle.net/mageek/GEp2y/1

Some advices:

If the attribute "resize" equals anything other than true, or is not set, the text-box will behave as a normal text-box.
You can set the maximum font-size and the minimum font-size allowed by setting the "max" and the "min" attributes. By default, the maximum is the current font-size and the minimum is 3 sizes smaller than the maximum.
I added something, like https://auth.me.com/authenticate, which removes the padding to gain space when the minimum font-size is reached.
There is the variable 'precision' (at the beginning of resize.js) that depends on the text-box, I set it to 18 for default text-box but if you modify the style of the text-box, you will maybe have to modify the variable to a better value (by testing).
I don't ensure the host of resize.js on the website like in the fiddle, you should copy the source code in a new file and save it.

Hey, this is really old now but how would you go about doing this for a text area with a fixed width and height? I've modified the script to include textarea elements, but it still tries to fit in on a single line. I would like it to work like this fiddle: jsfiddle.net/XCXJb/1 but this one is not capable of adjusting the font size back up when you delete characters.

Calvein · Accepted Answer · 2012-06-17 15:25:13Z

I've made the code for you, I took for example what I did on my own website for the contact form: the <textarea> gets taller if there is lot's of text.

The thing to do is to create an invisible<div>, for each keydown in the <input>, take its content and puts it into the <div>, and check its width is bigger than the <input>'s one.

The HTML

<form> <input> <div></div> </form>

The CSS where we set the same font-size for the <input> and the <div> and hide the <div> (with position: absolute because we need it's width and we don't want it to change the layout)

form > * { font-size: 22px } form > input { width: 150px; font-size: 18px; } form > div { position: absolute; left: -10000px; }

And the JavaScript (with jQuery here)

var $form = $('form') , $input = $('input', $form) , $autoResize = $('div', $form) , $both = $input.add($autoResize) , fontSize = parseInt($input.css('font-size'), 10) $input.on('keydown', function() { $autoResize.html(this.value.replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/ {2,}/g, function(spaces) { // Change the spaces to $nbsp; except the last one for (var i = 1, fakeSpaces = '', space; space = spaces[i++];) { fakeSpaces += '&nbsp;' } return fakeSpaces + ' ' }) ) // We add 10px to be sure it doesn't stick to the edges if ($autoResize.outerWidth() >= $input.outerWidth() - 10) { do { $both.css('font-size', --fontSize) } while ($autoResize.outerWidth() >= $input.outerWidth() && fontSize > 10) // 10px is the smallest font-size accepted if (fontSize === 10) { $input.off('keydown') } } })

Here is the jsFiddle.

Nice :) we might need to make the font size back to bigger if that text if being deleted or backspace until it can fit the textbox.

FelipeAls · Accepted Answer · 2012-06-17 14:42:12Z

You must use JavaScript to count how much characters've been typed already (I believe with .change() in jQuery) and change the font-size accordingly.

fineTuneFork · Accepted Answer · 2012-06-17 15:00:34Z

Yes,I think what @somebody is in trouble is doing is what they are doing in here.

Calculate how many letters will fit into the box - you know the width of the textbox. You know the font-size & padding that is being given here. So you know how many letters can be typed in the textbox before it overflows( not exactly) .
Or you can just type random letters & see how many can fit ! :)
Well, if you have time, you can as well dive into the events being fired when you keydown on the email address text box. You will learn a lot!

Collectives™ on Stack Overflow

How to resize text in a textbox if it is too large till a certain size

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Linked

Related