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

Keith McElroy
Keith McElroy used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Russ SuterSenior Software Developer

Commented:
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/

Author

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?

Author

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.
Senior Software Developer
Commented:
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

Author

Commented:
fabulous!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial