如何更改輸入的字體而不調整其大小？

我有一個文本輸入。我想在焦點上更改字體大小，並獲得模糊的舊值。例如，默認值是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

如何更改輸入的字體而不調整其大小？

回答

相關問題