如何更改输入的字体而不调整其大小?
问题描述:
我有一个文本输入。我想在焦点上更改字体大小,并获得模糊的旧值。例如,默认值是14和10。但是当我这样做时,整个输入的大小正在改变。如何避免这种情况?如何更改输入的字体而不调整其大小?
更新: 这项任务并不容易。如果我不知道旧的宽度和高度怎么办?我未能使用JQuery获取它们。
答
您可以分配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.
答
输入的默认大小取决于字符大小。为了避免这种情况,您将不得不以绝对单位指定输入的宽度和高度,例如像素。
答
您必须设置输入的固定宽度和高度,并且不管输入是否有焦点,都要保持不变。
编辑,因为这个问题进行了修改:
如果您使用JavaScript做这一切,你可以得到输入的初始计算的宽度和高度,将其指定为内联CSS。当你这样做时,你应该很好地修改字体大小。
答
实施例与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);
});
答
你必须做的来解决这个问题是什么明确的定义输入的高度,然后还定义字体大小。例如:
input{
height:14px;
font-size:10px;
}
但是如果我不知道宽度和高度怎么办?我正在写一个任意文本输入的js库。 – santino 2012-01-09 18:35:32