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的字体大小操纵文本区域抠图

回答

相关问题