Enlarge input fields on focus

 

Some time ago client insisted to be able to see all 500 characters while typing the text in input fields. Ok, reasonable. But they also insisted that web form should take the minimum space and that input fields should be "single line". Errr... "Oh I see", I said "so you want to make an oil painting using pencil, right? You can actually do it with JavaScript."

Doesn't matter if request sounds stupid or not, a solution is always needed. So I suggested to enlarge input fields on focus so that entire text could be visible during typing. I wasn't sure about usability, though, but the client was satisified. The solution was more than simple, and this is the example of it (I didn't make a demo because this is soooo simple):

$("textarea").focus(function(){
    $(this).width = 600; // enlarge width
}).blur(function(){
    $(this).width = 200; // return to original value
});

You can animate this as well:

$("textarea").focus(function(){
    $(this)).animate({ width:"600px"}, 1000); // enlarge width
}).blur(function(){
    $(this).animate({ width:"200px"}, 1000); // return to original value
});

Now, this might be a solution for many comment forms on various blogs because your website URL might not fit entirely in input field and this can be frustrating. The reason is simple - I, for example, submit my articles to many websites and my browser remembers my inputs, of course. So when I want to enter URL on some comment form I get this:

Which one to choose?

Oh, yes, input fields on these forms could be simply just larger, but hey... any sugesstions?

With support from
Janko

Janko is a UI designer, software engineer, blogger, speaker and artist. You can read more about him and warp speed blog here.