Bootstrap, html5, jquery - widen input box to match data when focused, then return to original size when offfocus

How do I add code to javascript which will make every input box expand to a size so that the contents is readable and then contract
to the original bootstrap-driven size after leaving the input box.

10 second video:
http://www.screencast.com/t/yQnPFkA6vr
Keith McElroyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterSenior Software DeveloperCommented:
You can actually do this without javascript. CSS alone can get the job done. Here's an example of CSS that would do it.
input
{
  width: 60px;
}

input:focus
{
  width: 120px;
}

Open in new window

and a working jsfiddle example: https://jsfiddle.net/3za2L9at/
If you wanna get fancy with animation: https://jsfiddle.net/3za2L9at/1/
Keith McElroyAuthor Commented:
input.comment
{
  width: 60px;
}

input:focus
{
  width: 100%;
}

I tried this, 100% only takes it out to the original width which seems to be based on the Heading.
It did not take it out to the width desired based on a variable length of text in the box.

Make sense, I hope?
Keith McElroyAuthor Commented:
input.proj
{
  width: 100%;
}

input.proj:focus
{
  width: 160px;
}

input.comment
{
  width: 100%;
}

input.comment:focus
{
  width: 260px;
}

This worked ok, I have to set the css by field;  it does
make the screen better.  Thanks for the solution, it helped a lot.
If there is a more dynamic way of handling that would
be very helpful also.
Russ SuterSenior Software DeveloperCommented:
OK, so you want to do it strictly based on the width of the text contained within. You would need some Javascript for that. Here's how you do it:
https://jsfiddle.net/3za2L9at/3/

The longer explanation:
You will need to capture the focus and blur events of the input boxes. On focus you will need to copy the text contents to a hidden span on the page then measure the width of the span. You can then set the width style attribute of the textbox. On blur you simply remove the style attribute. This is much easier to do using jQuery which my example provides.

Sample HTML:
<input type="text" id="test" value="This text is longer than the input box allows" />
<br/>
<input type="text" id="test2" value="This text isn't" />
<span id="text">Dummy text</span>
<br/>
<span id="stringMeasure"></span>

Open in new window

CSS:
#stringMeasure {
  visibility: hidden;
  white-space: nowrap;
}

input[type="text"] {
  width: 100px;
}

Open in new window

Javascript:
$(document).ready(function() {
  $("input:text").focus(function(evt) {
    var targetWidth = $("#stringMeasure").text($(this).val()).width();
    var controlWidth = $(this).width();
    if (targetWidth > controlWidth) {
      $(this).width(targetWidth);
    }
  });
  $("input:text").blur(function(evt) {
    $(this).removeAttr("style");
  });
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Keith McElroyAuthor Commented:
fabulous!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Bootstrap

From novice to tech pro — start learning today.