jQuery的字體大小操縱文本區域摳圖

我有，我想改變用+和文本的字體大小的文本區域 - 按鈕。jQuery的字體大小操縱文本區域摳圖

我知道如何獲得字號使用JavaScript/jQuery的改變。這一切都很好。然而，我的問題是，隨着字體大小的增長，它開始伸出文本框。第一行的上半部分將被塞在文本輸入區域的頂部條之下。我試着按比例調整行高字體大小的增加，但它似乎並沒有解決問題

這裏是我的代碼：

HTML

<div style="color: #0D1E28"> 
     <a href="#" id="minustext">-</a> 
     <a href ="#" id="resetfont"> 
     <span style="font-size: 9px; letter-spacing: -3px;">A</span> 
     <span style="font-size: 16px;">A</span> 
     </a> 
     <a href="#" id="plustext">+</a> 
    </div> 
<textarea name="txtOutput" id="txtOutput" style="width: 600px; height: 550px; line-height: 8.5; overflow: auto; font-size: 21.5px;" rows="2" cols="20" readOnly="readonly"> 
</textarea>

的JavaScript

$(document).ready(function() { 
      $("#plustext").click(function() { resizeText(1); }); 
      $("#minustext").click(function() { resizeText(-1); }); 
      $("#resetfont").click(function() { $("#txtOutput").css('font-size', "14px"); }); 
     }); 

     function resizeText(multiplier) { 

      if ($("#txtOutput").css('font-size') == "") { 
       $("#txtOutput").css('font-size', "12px"); 

      var currentFontSize = $("#txtOutput").css('font-size'); 
      var currentFontSizeNum = parseFloat(currentFontSize, 10); 
      var newFontSize = (currentFontSizeNum + (multiplier * 0.5)) + "px"; ; 

      var currentLineHeight = $("#txtOutput").css('line-height'); 

      if (currentLineHeight == "normal") { 
       currentLineHeight = "1"; 
      } 

      var currentLineHeightNum = parseFloat(currentLineHeight, 10); 
      var newLineHeight = (currentLineHeightNum + (multiplier * 0.5)); 

      $("#txtOutput").css('line-height', newLineHeight).css('font-size', newFontSize); 
     }

意見建議？

來源

2011-08-26 George

此代碼不能正常工作。您可以設置字體大小行這樣的：$（「＃txtRegistryReportOuput」）的CSS（ '字體大小'， '12像素'）不是這樣的：$（「＃txtRegistryReportOuput」）的CSS（ '字號'）= 「12像素」 ; –

對不起，我會更新它。我試圖改變名稱爲公共目的，但我錯過了一些。感謝您的支持 – George

@George - 問題不僅僅在於id，而在於您試圖爲函數調用的結果賦值，而這是您無法做到的。完成你想要做的事情的正確方法是在調用'.css（）'的時候將字體大小設置爲第二個參數。即，'.css（「font-size」，「12px」）'，而不是'.css（「font-size」）= 12px'。 – gilly3

我做了一些MODS的代碼得到它在我的工作結束，我認爲這是更清潔，更高效，以及（見下文）。我沒有做過很多測試，但它似乎在IE8 & FF中工作。

IMO線路高度應調整本身所提供的行高屬性被設置爲「正常」。而且我發現在Firefox中就是這樣。但是，我確實遇到了您在IE中引用的問題。爲了克服它，我不得不用自己的克隆替換textarea。顯然，這迫使IE重新計算適當的行高。希望這可以幫助。

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#plustext").click(function (e) { resizeText(1); e.preventDefault(); }); 
    $("#minustext").click(function (e) { resizeText(-1); e.preventDefault();}); 
    $("#resetfont").click(function (e) { $("#txtRegistryReportOuput").css('font-size', "14px"); e.preventDefault();}); 
}); 

function resizeText(multiplier) { 
    var textarea = $("#txtoutput"); 
    var fs = (parseFloat(textarea.css('font-size')) + multiplier).toString() + 'px'; // Increment fontsize 
    var text = textarea.val();               // Firefox won't clone val() content (wierd..) 
    textarea.css({'font-size':fs}).replaceWith(textarea.clone().val(text));   // Replace textarea w/ clone of itself to overcome line-height bug in IE 
} 
</script> 


<div style="color: #0D1E28"> 
    <a href="#" id="minustext">-</a> 
    <a href ="#" id="resetfont"> 
     <span style="font-size: 9px; letter-spacing: -3px;">A</span> 
     <span style="font-size: 16px;">A</span> 
    </a> 
    <a href="#" id="plustext">+</a> 
</div> 
<textarea name="txtOutput" id="txtoutput" style="width: 600px; height: 550px; line-height: 8.5; overflow: auto; font-size: 21.5px;" rows="2" cols="20"></textarea>

來源

2011-08-26 19:22:54

我拿了一些你的代碼，但是你改變了我最初發布的用於增加字體大小的乘法器函數，而不是一半，這不是一個巨大的交易，而只是看起來很奇怪。有沒有特定的原因？同樣，由於更多的「前鋒」而不是「拋光者」，你能否解釋是什麼讓你的改變更有效率？ – George

我應該提到這一點。 IE8不喜歡增加字體大小的一半，所以我把它移動到一個完整的像素。至於性能，我寫道，因爲新的代碼沒有執行任何行高計算。但是，我忘了我必須執行textarea克隆/替換以克服IE行高度錯誤。這可能會大大減慢我的代碼。 –

這是一個奇怪的錯誤。通過從dom中刪除節點並重新插入節點，似乎可以解決問題。

$("#txtOutput").remove().appendTo("body");

http://jsfiddle.net/jyFfw/

來源

2011-08-26 18:51:25 gilly3

非常感謝您的回答。我最終與喬一起去，只是因爲他的回答佔了一個奇怪的Firefox的怪癖，但否則這將是完美的。 – George

jQuery的字體大小操縱文本區域摳圖

回答

相關問題