Question

I’ve an text input. I want to change font size on focus, and get the old value on blur. For example default is 14 and 10 when focused. But when I do this, the size of whole input is changing. How to avoid that?

UPDATE:
The task isn’t so easy. What if I don’t know the old width and height? I failed to obtain them using JQuery.

Answer 1

You can assign width and height style properties to the input element, e.g.:

input {
    width: 150px;
    height: 32px;
}

Just be sure to use px and not em. 🙂

Live example – Works in IE6 (!), Firefox 9, and Chrome 15, which suggests a fair degree of compatibility.

Update for edited question:

Same principal, but if you want to query the width and height and now that you’ve told us you’re using jQuery:

CSS:

input {
    font-size: 14pt;
}

JavaScript:

jQuery(function($) {

  var target = $("#target"),
      width  = target.width(),
      height = target.height();

  target.css({
    width: width + "px",
    height: height + "px"
  });

  target.focus(function() {
      this.style.fontSize = "10pt";
  });
  target.blur(function() {
    this.style.fontSize = "";
  });

});

Live example – As with the one above, works in IE6, Firefox 9, and Chrome 15.