如何更改输入的字体而不调整其大小？

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

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

来源

2012-01-09 santino

但是如果我不知道宽度和高度怎么办？我正在写一个任意文本输入的js库。 – santino 2012-01-09 18:35:32

~~您可以分配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，火狐9和Chrome 15.

来源

2012-01-09 18:32:03

我可以发誓，我检查了这种可能性，它有一些缺点。但我会在一会儿再试一次。出现了一个重大问题，我必须快点。我会在一些时间（简言之，我希望）回答。 – santino 2012-01-09 19:04:09

似乎工作！我不知道为什么之前它不适合我。必须检查它。 – santino 2012-01-09 20:52:13

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

来源

2012-01-09 18:31:25 Guffa

您必须设置输入的固定宽度和高度，并且不管输入是否有焦点，都要保持不变。

编辑，因为这个问题进行了修改：

如果您使用JavaScript做这一切，你可以得到输入的初始计算的宽度和高度，将其指定为内联CSS。当你这样做时，你应该很好地修改字体大小。

来源

2012-01-09 18:31:49

但我试过的所有jquery函数都没有做到。总是有一些像素在移动。 – santino 2012-01-09 18:45:23

@santino你是什么意思？当您分配内联css时，或者当您更改字体大小时它移动了吗？ – 2012-01-09 18:50:41

有时会出现奇怪的效果，例如：焦点和模糊后，输入文字的大小与以前不一样，它是一个宽度更大的像素。点击几下后，您可以看到它正在增长。 – santino 2012-01-09 18:54:32

实施例与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); 
});

来源

2012-01-09 18:34:32

你必须做的来解决这个问题是什么明确的定义输入的高度，然后还定义字体大小。例如：

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

来源

2012-01-09 18:43:07 Akash

如何更改输入的字体而不调整其大小？

回答

相关问题