Question

我有一个文本区域，我想使用+和 - 按钮更改文本的字体大小。

我知道如何使用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);
        }

建议？

Answer 1

这是一个奇怪的错误。通过从dom中删除节点并重新插入它，这似乎可以解决问题。

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

http://jsfiddle.net/jyFfw/

Answer 2

我为你的代码制作了一些mod以使其在我的最终工作，我认为它更干净，更有效（见下文）。我没有做过很多测试，但似乎在IE8＆amp; FF。

如果line-height属性设置为“normal”，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>

Jquery字体大小操作TextArea Cutout

2 个答案: