Question

我有一个文字输入。我想改变焦点上的字体大小，并获得模糊的旧值。例如，聚焦时默认值为14和10。但是当我这样做时，整个输入的大小正在改变。如何避免？

更新：任务并不那么容易。如果我不知道旧的宽度和高度怎么办？我没能使用JQuery获取它们。

Answer 1

输入的默认大小取决于字符大小。为避免这种情况，您必须以绝对单位指定输入的宽度和高度，例如像素。

Answer 2

~~您可以将width和height样式属性分配给input元素，例如：~~

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

请务必使用px而不是em。： - ）

~~Live example - 适用于IE6（！），Firefox 9和Chrome 15，它们表明了相当程度的兼容性。~~

编辑问题的

更新：

相同的主体，但如果你想查询宽度和高度，现在你告诉我们你正在使用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 - 与上面的一样，适用于IE6，Firefox 9和Chrome 15。

Answer 3

jQuery示例：http://jsfiddle.net/5DyNE/

<强> HTML

<input type="text" class="foo" id="bar" />

<强> CSS

#bar {
    width: 100px;
    height: 15px;
}

<强> JS

var oldSize;
$('#bar').focus(function () {
    oldSize = $(this).css('font-size');
    $(this).css('font-size', 20);
});
$('#bar').blur(function () {
    $(this).css('font-size', oldSize);
});

Answer 4

您还必须设置输入的固定宽度和高度，并且无论输入是否具有焦点，都要保持相同。

自问题修改后进行编辑：

如果您使用JavaScript完成所有操作，则可以获得输入的初始计算宽度和高度，并将其指定为内联CSS。当你这样做时，你可以很好地修改字体大小。

Answer 5

要解决此问题，您需要明确定义输入的高度，然后定义font-size。例如：

input{
height:14px;
font-size:10px;
}

如何在不调整大小的情况下更改输入的字体？

5 个答案: